クラスのすべての要素にaddEventHandlerを追加

Question

セクションのクラスを持つすべての要素にイベントリスナーを追加しようとしていますが、ノードリストの最後のオブジェクトにのみ適用されます。

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

それぞれにイベントリスナーを追加する方法はありますか？

Answer 1

JavaScriptにブロックスコープがないという問題があります。したがって、毎回新しい変数として宣言するのではなく、elemを各繰り返しに上書きします。各反復で新しい変数を宣言するための唯一の方法は、関数を使用している：

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

しかしaddEventListenerセットthis要素に、あなたのケースでは、あなたはきちんと行うことができるように：//：

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

Answer 2

これは、機能内でelemとiを参照しているためです。私は試してみることができます

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