Jak dodać detektor zdarzeń do wszystkich childnodes elementu div i tablicy div?

Question

Uczę się JS i staram się unikać jQuery, dopóki moje umiejętności JS nie będą lepsze.

Cel: dodać listę zdarzeń, dla zdarzenia kliknięcia, do wszystkich elementów div danej klasy. Niech wszystkie węzły podrzędne tej klasy odpowiedzą na zdarzenie.

Moje 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> 

wybiorę wszystkie .grid-panel DIV za pomocą tego JS

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

następnie, ponieważ zwraca tablicę div z klasą .grid-panel I dodać detektor zdarzeń do kliknięcia jako taki

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

moim zadaniem jest to

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

To działa, jeśli kliknę bardzo specyficzną część .grid-panel div i e dzienniki że określony element. Jednak kliknięcie dowolnych elementów podrzędnych rejestruje element e jako element, który został kliknięty, ale lista zdarzeń nie zostanie zastosowana do tego elementu. Wyraźnie brakuje mi tutaj tej delegacji wydarzeń. Naprawdę chcę, aby funkcja działała na klikniętym div i wszystkich jego elementach potomnych.

Answer 1

Ty wiążące poprawnie, ale jeśli chcesz uzyskać element, do którego obsługi jest związany w uchwycie, a następnie użyć this lub event.currentTarget zamiast event.target.

event.target przedstawia rzeczywisty element, który został kliknięty, co czasem jest również przydatne.

Należy również zdefiniować parametr event w funkcji. Nie wszystkie przeglądarki są dostępne jako globalna zmienna.

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