Question

我正在尝试使用一个section类为所有元素添加一个事件监听器，但它只将它应用于节点列表中的最后一个对象。

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

addEventHandler到类中的每个元素

2 个答案: