addEventHandler a ogni elemento di una classe

Question

Sto tentando di aggiungere un listener di eventi a tutti gli elementi con una classe di sezione, tuttavia si applica solo all'ultimo oggetto nell'elenco di nodi.

var section = document.querySelectorAll('.section'); 
for(var i=0;i<section.length;i++){ 
var elem = section[i]; 
elem.addEventListener('click', function() {move (elem)}, false); 
} 

C'è un modo per aggiungere il listener di eventi per ognuno?

Answer 1

Il problema è che non c'è alcun ambito di blocco in JavaScript. Pertanto, elem viene sovrascritto ogni iterazione, anziché essere dichiarato ogni volta come una nuova variabile. L'unico modo per dichiarare nuove variabili in ogni iterazione è attraverso una funzione:

for(var i = 0; i < section.length; i++){ 
    (function(elem) { 
    elem.addEventListener('click', function() { move(elem); }, false); 
    })(elem); 
} 

Ma addEventListener set this all'elemento, così nel tuo caso si può ben fare:

for(var i = 0; i < section.length; i++){ 
    elem.addEventListener('click', function() { move(this); }, false); 
} 

Answer 2

è perché si fa riferimento a elem e i all'interno della funzione. Posso suggerire di provare

var section = document.querySelectorAll('.section'); 
for(var i=0;i<section.length;i++){ 
    var handler = (function(ind){ 
     return function() { 
      move (section[ind]); 
     } 
    })(i) 

    elem.addEventListener('click', handler, false); 
}