使用addEventListener绑定click事件为什么会在页面加载时触发？

• addEventListener方法要求第二个参数传入事件触发时才执行的函数引用，你代码中直接写了console.log("Button clicked")，JS解析到函数名带括号的表达式时会立即执行该语句，所以遍历每个按钮的阶段就会执行打印逻辑，最终是把console.log的返回值undefined绑定给了点击事件，点击按钮时反而不会有任何反应。

你只需要把要执行的逻辑包裹在匿名函数中，保证只有点击事件触发时才会执行内部代码即可，修复后代码如下：

document.querySelectorAll("button").forEach(node => {
  node.addEventListener("click", () => console.log("Button clicked"));
});

如果需要传递多个参数或者兼容旧版运行环境，也可以使用bind方法固化打印参数，效果一致：

document.querySelectorAll("button").forEach(node => {
  node.addEventListener("click", console.log.bind(console, "Button clicked"));
});

内容的提问来源于stack exchange，提问作者eg3