Mi sto insegnando a JS e sto cercando di evitare jQuery fino a quando le mie abilità JS sono migliori.Come aggiungo un listener di eventi a tutti i childnodes di un div in e array di quei div?
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.
Wow. E 'stato eccellente Grazie per aver corretto la proprietà dell'evento che stavo usando. – Tamb
@Tamb: prego. In bocca al lupo! –