如何为 div 的每个元素添加事件监听器？ [复制]答案

【问题标题】：how to add an eventlistener for every element of a div? [duplicate]如何为 div 的每个元素添加事件监听器？ [复制]
【发布时间】：2020-07-06 23:56:39
【问题描述】：

我正在尝试为这个 div 的每个元素添加一个事件监听器。但我似乎无法访问这个 div 的每个元素。 console.log 可以将表格打印为列表。但是在我尝试使用 forEach 方法后它显示错误。为什么会这样？

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

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

【问题讨论】：

【解决方案1】：

table的返回值是HtmlCollection而不是数组，所以不能使用Array.prototype.forEach方法。

相反，您可以像这样遍历 div：

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>

【讨论】：

我改成了 for of 方法。但奇怪的是。它仍然无法打印出结果。不过，这一次，它没有显示任何错误消息。
您是否尝试过更换您的console.log 以实际添加处理程序？ this JSFiddle 中的处理程序有效。
是的，我试过了。它适用于 w3c 网络编辑器和堆栈溢出的编辑器。但是在我把它放回我的代码之后。它奇怪地不起作用。并且它不显示错误消息。我正在使用 chrome 浏览器和 node.js 实时服务器模块。不知道这是否会影响结果。
我找出问题所在。我把脚本放在头部。在加载 HTML 元素之前加载脚本。