为什么给HTML页面body添加loadstart事件的addEventListener不生效

问题核心原因有三个： #

1. 你误以为body.onloadstart = populate_body()是事件绑定生效，实际是函数被直接调用
   你给populate_body加了括号，代码执行到这一行时会直接调用该函数，把函数返回值（undefined）赋值给body.onloadstart属性，你看到的弹窗根本不是loadstart事件触发的，是脚本加载执行时直接运行的结果。
2. loadstart事件本身不支持绑定在body元素上
   loadstart属于资源加载类事件，仅会在媒体元素（img/audio/video）、XMLHttpRequest、fetch请求等资源加载场景触发，body元素没有对应的loadstart事件，自然不会触发回调。
3. 脚本执行时机错误，获取body元素时元素还未被浏览器解析
   你把JS脚本放在head标签内，脚本同步加载执行的时候，浏览器还没解析到body标签，此时document.getElementsByTagName("body")[0]拿到的是null，后续的绑定操作本身就会抛出错误无法执行。

正确实现方案 #

如果你要在页面DOM解析完成后执行逻辑，应该监听document对象的DOMContentLoaded事件，示例代码如下：

document.addEventListener('DOMContentLoaded', populate_body);

function populate_body() {
    alert("Called");
}

如果不需要等所有资源加载完成，也可以直接把JS脚本放在body标签的末尾，此时DOM已经解析完成，不需要额外绑定事件，直接写逻辑即可。

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