document.addEventListener('load')无效，是否仅可通过window绑定该事件？

是的，你观察得没错——document.addEventListener("load")这种写法确实无效，只有绑定在window对象上的load事件才会在页面完全加载完成时触发。

原因说明 #

load事件是专门用来监听整个页面所有资源（包括DOM树、图片、样式表、外部脚本等）加载完成的事件，它的触发目标是window，而非document。document对象本身并不支持load事件，你看到的那些错误写法大概率是混淆了另一个常用事件：DOMContentLoaded。

DOMContentLoaded是绑定在document上的事件，它会在DOM树构建完成后立即触发，不需要等待图片、字体这类外部资源加载完毕，这也是很多人会把它和load搞混的原因。

正确用法示例 #

1. 等待页面所有资源加载完成（对应你需求中的Loaded场景）：

window.addEventListener("load", function () {
  console.log("页面所有资源加载完成。");
});

2. 仅等待DOM构建完成（无需等外部资源）：

document.addEventListener("DOMContentLoaded", function(){
  console.log("DOM树已构建完成，可以操作页面元素了。");
});

为什么你的测试代码无效 #

你在<head>中给document绑定load事件，由于document本身不会派发这个事件，所以事件回调永远不会执行。换成绑定window就能正常触发。

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