addEventListener 适用于简单的 for 循环，但不适用于 for-in 循环答案

【问题标题】：addEventListener works in simple for loop but doesn't work with for-in loopaddEventListener 适用于简单的 for 循环，但不适用于 for-in 循环
【发布时间】：2018-03-13 03:03:42
【问题描述】：

当我使用简单的 for 循环时，addEventListener 在 for 循环中效果很好。

但是当我使用 for-in 循环时，它会产生类似的错误

未捕获的 TypeError: checklist[i].addEventListener 不是函数

这是我的工作良好的代码。

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

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

【问题讨论】：

标签： javascript loops for-loop addeventlistener for-in-loop

【解决方案1】：

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

【讨论】：

谢谢！！现在我可以理解我的元素下的属性是什么了。祝你有美好的一天！