Come aggiungo un listener di eventi a tutti i childnodes di un div in e array di quei div?

Question

Mi sto insegnando a JS e sto cercando di evitare jQuery fino a quando le mie abilità JS sono migliori.

Obiettivo: aggiungere un eventlistener, per l'evento click, a tutte le div di una determinata classe. Chiedi a tutti i nodi figli di quella classe di rispondere all'evento.

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

seleziono tutti i .grid-panel div utilizzare questo JS

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

poi, dal momento che restituisce un array di div con la classe .grid-panel aggiungo il listener di eventi per click come tale

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

la mia funzione è presente

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

Questo funziona se scatto una parte molto specifica del .grid-panel div e le e registri elemento specifico. Tuttavia, facendo clic su qualsiasi figlio del div registra lo e come elemento su cui ho fatto clic, ma l'eventlistener non viene applicato a quell'elemento. Mi manca chiaramente qualcosa qui con questa delegazione di eventi. Voglio davvero che la funzione si attivi sul div cliccato e su tutti i suoi childnodes.

Answer 1

L'associazione è corretta, ma se si desidera ottenere l'elemento a cui è associato il gestore nel gestore, utilizzare this o event.currentTarget anziché event.target.

Il event.target rappresenta l'elemento effettivo su cui è stato fatto clic, che a volte è anche utile.

Inoltre, è necessario definire il parametro event nella funzione. Non tutti i browser lo hanno disponibile come variabile 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); 
}