事件冒泡和捕获：了解 DOM 中的传播

事件冒泡和捕获在 HTML DOM API 中的事件传播中发挥着至关重要的作用。为了理解它们的功能，让我们深入研究这两个概念的复杂性。

事件冒泡与事件捕获

当一个事件发生在嵌套在另一个元素中的元素中时，并且两个元素都为该特定事件注册了事件处理程序，事件传播模式决定了元素接收事件的顺序event.

• 事件冒泡： 事件最初由最里面的元素捕获和处理，然后向外传播到其父元素。
• Event捕获： 事件首先被最外层元素捕获并向内传播到其嵌套elements.

滴流与冒泡

捕获也称为“滴流”，这个术语有助于记住传播顺序：“滴流、冒泡” ”

浏览器支持

• Netscape介绍事件捕获，而 Microsoft 倡导事件冒泡。
• W3C 文档对象模型事件标准 (2000) 合并了这两种机制。
• IE

性能注意事项

事件冒泡与事件捕获相比，在复杂 DOM 中的性能可能略低。

用法

我们利用 addEventListener(type,listener,useCapture) 方法在以下任一中注册事件处理程序冒泡（默认）或捕获模式。要使用捕获模型，第三个参数应设置为 true。

示例

考虑以下 HTML 结构：

如果li元素发生点击事件：

• 捕获模式下，事件首先由div处理，然后是ul，最后是li.
• 在冒泡模式下，事件首先由 li 处理，然后由 ul 处理，最后由div.

其他资源

• [QuirksMode 上的事件顺序](https://www.quirksmode.org/js/events_order.html )
• [addEventListener 上MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
• [QuirksMode 上的高级事件](https://www.quirksmode.org/ js/events/)

互动演示

下面的互动示例说明了事件传播的捕获和冒泡阶段：

var logElement = document.getElementById('log');

function log(msg) {
    logElement.innerHTML  = ('
'   msg   '
');
}

function capture() {
    log('capture: '   this.firstChild.nodeValue.trim());
}

function bubble() {
    log('bubble: '   this.firstChild.nodeValue.trim());
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i 
单击任何突出显示的元素时，观察首先发生的事件捕获阶段，然后是冒泡阶段。