javascript - 将EventHandler 添加到类中的每个元素

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