Question

我已经定义了此事件处理程序：

document.addEventListener("load", function(){
  alert("Called on page load");
}, false);

我注意到，当布尔标志设置为false时（气泡阶段触发），它不会被调用。有人可以帮我弄清楚为什么会这样。

Answer 1

将事件发送到元素时，它将在捕获阶段下降文档树，直到到达目标为止。然后，如果它是冒泡事件，它会冒出来。

来自2.1 Introduction to “DOM Events” in the DOM standard：

将事件调度到参与树的对象（例如元素）时，它也可以到达该对象祖先的事件侦听器。首先，以树顺序调用其捕获变量设置为true的所有对象的祖先事件侦听器。其次，调用对象自己的事件侦听器。最后，只有事件的bubbles属性值是true时，对象的祖先事件侦听器才被再次调用，但现在是按反向树顺序进行的。

load并非冒泡事件，而且-这是重要的部分-并非针对document。添加捕获侦听器时，实际上是从文档内容中通常会接收到该事件的部分（例如脚本或图像）中获得load个事件。在仅包含脚本的页面上，您根本看不到监听器被调用：

<iframe srcdoc="<script>document.addEventListener('load', () => { alert('loaded'); }, true);</script>"></iframe>

在具有load个事件的页面上，该事件在附加侦听器后触发，例如包含<style> s的Stack Snippet，您将多次看到它：

let i = 0;

document.addEventListener('load', e => {
    console.log(`loaded ${++i}: ${e.target.nodeName}`);
}, true);

您可能打算向window而不是document添加一个非捕获的侦听器，因为window是一个接收load事件的对象，与{{1} }。（或者您可能还有其他意思。有很多方法可以解释“页面加载”。有关document事件在load上的含义以及可能的替代方法，请参见Window: load event on MDN不是你想要的。）

window

事件冒泡如何处理事件？

1 个答案: