JavaScript中document.addEventListener()无法正常工作的原因是什么？

问题原因 #

• 事件绑定的对象和事件名称不匹配：load 事件是挂载在 window 对象上的事件，document 对象不存在该事件，所以绑定后不会触发回调。你代码里的console.log("hello")能正常执行，说明脚本本身运行正常，问题仅出在事件绑定的配置上。
• 如果你要监听DOM结构加载完成的事件，document 对象对应的事件名为 DOMContentLoaded，该事件会在DOM解析完成后立即触发，不需要等待样式、图片等外部资源加载完毕。

解决方法 #

你可以任选以下任意一种方案修改：

1. 把事件绑定到 window 对象上，沿用 load 事件

// 替换原有的document.addEventListener("load",f1);
window.addEventListener("load",f1);

2. 保留绑定到 document 的写法，修改事件名为 DOMContentLoaded

// 替换原有的document.addEventListener("load",f1);
document.addEventListener("DOMContentLoaded",f1);

3. 由于你的script标签放在</body>闭合标签之后，此时页面DOM已经完全渲染完成，你可以直接调用f1()，不需要额外绑定加载事件。

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