如何为div中的每个元素添加事件监听器？

Question

我试图给这个div的每个元素添加事件监听器，但我似乎无法访问该div的每个元素。控制台可以将表格打印为列表，但在尝试使用forEach方法后会显示错误。为什么会这样？

let table = document.getElementsByClassName('pixel');
console.log(table);

table.forEach(item => {
    console.log(item)
});

- user3398356

Answer 1

HtmlCollectionArray.prototype.forEach

let table = document.getElementsByClassName('pixel');
console.log(table);

for (let item of table) {
  console.log(item);
};

<div>
  <div class="pixel">
    P1
  </div>
  <div class="pixel">
    P2
  </div>
</div>

的返回值是 而不是数组，因此您无法使用 方法进行迭代。相反，您可以像这样遍历 divs:

- notquiteamonad

---

我改用了for of方法，但是奇怪的是，它仍然无法打印出结果。虽然这一次没有显示任何错误信息。 - user3398356

你尝试过将 console.log 替换为实际添加处理程序吗？这个 JSFiddle 中的处理程序是有效的。 - notquiteamonad

是的，我尝试过了。它在W3C网页编辑器和Stack Overflow的编辑器上运行良好。但是当我把它放回我的代码中时，它奇怪地不起作用。而且它也没有显示错误信息。我正在使用Chrome浏览器和Node.js live-server模块。不知道这是否会影响结果。 - user3398356

我找出了问题所在。我将脚本放在头部区域。这样脚本就会在 HTML 元素加载之前被加载。 - user3398356