如何将事件监听器添加到div的所有子节点和这些div的数组中？

I'm teaching myself JS and trying to avoid jQuery until my JS skills are better.

我正在自学JS并试图避免使用jQuery，直到我的JS技能更好。

Goal: add an eventlistener, for click event, to all the divs of a certain class. Have all the child nodes of that class respond to the event.

目标：为click事件添加一个eventlistener到某个类的所有div。让该类的所有子节点响应该事件。

My HTML

我的HTML

 <div class="grid-panel six columns">
            <div class="grid-panel-image">
                <i class="fa fa-css3"></i>
            </div>
            <div class="grid-panel-title">
                <h4>css3</h4>
            </div>                  
    </div>
    <div class="grid-panel six columns">
        <div class="grid-panel-image">
            <i class="fa fa-paint-brush"></i>
        </div>
        <div class="grid-panel-title">
            <h4>tamberator</h4>
        </div>
    </div>

I select all the .grid-panel divs using this JS

我使用这个JS选择所有.grid-panel div

var gridPanels = document.querySelectorAll('.grid-panel');

then, since that returns an array of divs with the class .grid-panel I add the event listener for click as such

然后，因为它返回一个带有.grid-panel类的div数组，所以我添加了click的事件监听器

for(i=0; i<gridPanels.length; i++){
    gridPanels[i].addEventListener('click', myFunction);
}

my function is this

我的功能是这个

 myFunction(){
    var e = event.target;

        switch(e){
            case gridPanels[0]:
            modalArray[0].setAttribute("data-modal-display", "show");
            break
            case gridPanels[1]:
            modalArray[1].setAttribute("data-modal-display", "show");
            break
        }

            console.log(e);
    }

This does work if I click a very specific part of the .grid-paneldiv and the e logs that specific element. However, clicking any children of the div logs the e as the element i clicked, but the eventlistener is not applied to that element. I'm clearly missing something here with this event delegation. I really want the function to fire on the div clicked and all of its childnodes.

如果我单击.grid-paneldiv的一个非常特定的部分并且e记录该特定元素，这确实有效。但是，单击div的任何子项将e记录为我单击的元素，但eventlistener不会应用于该元素。我在这个事件代表团中明显遗漏了一些东西。我真的希望函数能够点击所点击的div及其所有子节点。

1 个解决方案

#1

You're binding correctly, but if you want to get the element to which the handler is bound in the handler, then use this or event.currentTarget instead of event.target.

您正确绑定，但是如果要获取处理程序中绑定处理程序的元素，则使用this或event.currentTarget而不是event.target。

The event.target represents the actual element that was clicked, which is sometimes useful as well.

event.target表示单击的实际元素，有时也很有用。

Also, you should define the event parameter in the function. Not all browsers have it available as a global variable.

此外，您应该在函数中定义事件参数。并非所有浏览器都将其作为全局变量提供。

function myFunction(event){
    var e = this
 // var e = event.currentTarget // same as above

    switch(e){
        case gridPanels[0]:
        modalArray[0].setAttribute("data-modal-display", "show");
        break

        case gridPanels[1]:
        modalArray[1].setAttribute("data-modal-display", "show");
        break
    }

    console.log(e);
}

#1