如何將事件偵聽器添加到div的所有子節點和這些div的數組中？

Question

我正在自學JS並試圖避免jQuery，直到我的JS技能更好。

目標：為click事件添加一個eventlistener到某個類的所有div。 讓該類的所有子節點響應該事件。

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

我使用這個JS選擇所有.grid-panel div

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

然后，因為它返回一個帶有類.grid-panel的div數組，所以我添加了click的事件監聽器

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-panel div的一個非常特定的部分並且e記錄該特定元素，這確實有效。 但是，單擊div的任何子項將e記錄為我單擊的元素，但eventlistener不會應用於該元素。 我在這個事件代表團中明顯遺漏了一些東西。 我真的希望函數能夠點擊所點擊的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);
}