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

Question

我正在自学 JS 并尽量避免 jQuery 直到我的 JS 技能更好。

目标：为某个class的所有div添加一个事件监听器，用于点击事件。让那个 class 的所有子节点响应事件。

我的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>

我select所有.grid-paneldiv都在使用这个JS

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

然后，因为 returns 一个 div 的数组与 class .grid-panel 我为点击添加事件侦听器

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

我的功能是这样的

 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);
    }

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

Answer 1

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

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

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

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);
}

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

How do I add an event listener to all the childnodes of a div in and array of those div?

javascript

arrays

events

delegation