加载事件不适用于 addEventListener 但适用于 onload 属性

Question

const body = document.querySelector("body");

body.addEventListener("load", () => {
  console.log("test");
});

body.onload = () => {
  console.log("test");
};

当我只使用 addEventListener 时，我在控制台中看不到消息，但是如果我使用 onload 属性或在 html 中使用 onload 属性，它就可以工作

Answer 1

这是因为load事件是所谓的Window-reflecting body element event handler set的一部分。
基本上，这些事件也可以作为<body>元素上的 HTML 属性和 IDL 属性访问，即使主要目标实际上是Window object。

这样做是因为历史上我们必须使用 HTML 属性来设置事件处理程序，而在<body>标记中设置加载事件更加“自然”。 从那时起，我们有了更好的方法来设置事件处理程序，我们可以清楚地定义这个事件在Window object 上触发，这更符合逻辑。
然而浏览器仍然需要支持监听onload="" HTML 属性的代码，所以这个反射的东西已经设置好了。
请注意，它不仅仅是添加一个新的事件侦听器，该事件实际上仅在Window object 上触发，但可以从<body>设置处理程序，甚至覆盖已在Window object 上设置的处理程序。

 window.onmessage = (evt) => console.log("handled a message from Window, is Window the currentTarget:", evt.currentTarget === window); document.body.onmessage = (evt) => console.log("handled a message from body, is Window the currentTarget:", evt.currentTarget === window); postMessage("hello", "*");

EventTarget#addEventListener()没有办法进行这种重新定位，所以当您执行document.body.addEventListener("load", cb)时，您实际上是在等待一个将通过<body>元素 go 的事件，但正如所演示的上面，事件实际上只在Window object 上触发。

加载事件不适用于 addEventListener 但适用于 onload 属性

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-03-03 03:51:01

加载事件不适用于 addEventListener 但适用于 onload 属性

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-03-03 03:51:01

解决方案1
0 已采纳 2022-03-03 03:51:01