事件冒泡是如何处理事件的？

Question

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

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

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

Answer 1

当一个事件被发送到一个元素时，它会在捕获阶段下降文档树，直到它到达目标。然后，如果这是一个冒泡的事件，它会再次冒泡。

来自2.1 DOM标准中的“DOM事件”简介

当一个事件被分派到一个参与树的对象(例如一个元素)时，它也可以到达该对象的祖先上的事件侦听器。首先，按树顺序调用所有对象的祖先事件侦听器(其捕获变量设置为true )。其次，调用对象自己的事件侦听器。最后，并且只有当事件的冒泡属性值为真时，对象的祖先事件侦听器才会再次被调用，但现在按反向树顺序调用。

load不是一个冒泡的事件，而且--这是重要的部分--它没有针对document。当您添加捕获监听器时，您实际上是从通常接收事件的文档内容的部分获取load事件，比如脚本或图像。在只有脚本的页面上，您将根本不会看到监听器被调用：

​

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

​

在一个带有load事件的页面上，在附加侦听器之后触发，比如这个包含<style>的堆栈片段，您将不止一次看到它：

​

let i = 0;

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

​

您可能打算向window而不是document添加非捕获侦听器，因为window是接收load事件的东西，与document不同。)或者你可能有别的意思。有很多解释“页面加载”的方法。有关load事件在window上的含义以及如果不是您想要的替代方案的详细信息，请参阅load)。

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