Как добавить прослушиватель событий ко всем дочерним элементам div и массиву этих div?

Question

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

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

Моего 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'); 

тогда, так что возвращает массив дивы с классом .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 не применяется к этому элементу. Мне явно не хватает чего-то здесь с этой делегацией. Я действительно хочу, чтобы функция срабатывала по нажатому элементу и всем его дочерним элементам.

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