addEventListener 在简单的 for 循环中工作，但不适用于 for-in 循环

Question

当我使用简单的 for 循环时，addEventListener 在 for 循环中运行良好。

但是当我使用 for-in 循环时，会出现类似

的错误

Uncaught TypeError: checklist[i].addEventListener is not a function

这是我的工作代码。

var checklist = document.querySelectorAll(".checklist");
for (var i = 0, len = checklist.length; i < len; i += 1) {
  checklist[i].addEventListener('change', function (event) {
    alert('test');
  });
}

这是我的错误代码。

var checklist = document.querySelectorAll(".checklist");
for (var i in checklist) {
  checklist[i].addEventListener('change', function (event) {
    alert('test');
  });
}

我不知道这两个代码有什么区别。请帮我。谢谢！

Answer 1

问题是 for-in 循环遍历数组或对象的所有可枚举属性。因此，如果您在控制台中记录您的变量，您将看到除了元素的索引之外，您还可以获得其他属性，例如数组的 length、keys、values 和 checklist[length] 或 checklist[keys] 不是 DOM 元素。所以你不能给它们添加事件监听器。

addEventListener 在简单的 for 循环中工作，但不适用于 for-in 循环

addEventListener works in simple for loop but doesn't work with for-in loop

javascript

loops

for-loop

addeventlistener

for-in-loop