Как я могу добавить прослушиватель событий, чтобы все childnodes от дел и массив из этих див?

Я обучаю себя JS и пытаюсь избегать jQuery, пока мои навыки JS не станут лучше.

Цель: добавить eventlistener, например click event, ко всем divs определенного класса. Пусть все дочерние узлы этого класса ответят на событие.

Мой 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>

Я выбираю все .grid-panel дивы, используя этот JS 

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

Тогда, поскольку это возвращает массив divs с классом .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-panel div и e регистрирует этот конкретный элемент. Однако щелчок любого дочернего элемента div регистрирует e как элемент, который я щелкнул, но eventlistener не применяется к этому элементу. Я явно чего-то не понимаю в этой делегации на мероприятие. Я действительно хочу, чтобы функция срабатывала на div clicked и все его дочерние коды.

1 7
javascript arrays events delegation

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