Comment ajouter un écouteur d'événement à tous les childnodes d'un div dans et un tableau de ces div?

Question

Je m'apprends à JS et j'essaie d'éviter jQuery jusqu'à ce que mes compétences JS soient meilleures. Objectif: ajouter un eventlistener, pour l'événement click, à tous les divs d'une certaine classe. Avoir tous les nœuds enfants de cette classe répondent à l'événement.

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

je sélectionne tous les .grid-panel divs utilisant ce JS

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

puis, depuis retourne un tableau de divs avec la classe .grid-panel j'ajouter l'écouteur d'événement pour un clic en tant que tel

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

ma fonction est ce

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

Cela fonctionne si je clique sur une partie très spécifique du .grid-panel div et les e journaux que des éléments spécifiques. Toutefois, en cliquant sur les enfants de la div enregistre le e comme l'élément sur lequel j'ai cliqué, mais le eventlistener n'est pas appliqué à cet élément. Il me manque clairement quelque chose ici avec cette délégation d'événement. Je veux vraiment que la fonction tire sur le div cliqué et tous ses childnodes.

Answer 1

Vous liez correctement, mais si vous souhaitez obtenir l'élément auquel le gestionnaire est lié dans le gestionnaire, utilisez this ou event.currentTarget au lieu de event.target.

Le event.target représente l'élément réel qui a été cliqué, ce qui est parfois utile aussi. Vous devez également définir le paramètre event dans la fonction. Tous les navigateurs ne l'ont pas disponible en tant que variable globale.

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