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 个解决方案

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