编辑“︁JavaScript事件捕获”︁

= JavaScript事件捕获 =

== 介绍 ==
在JavaScript中，事件捕获（Event Capturing）是DOM事件传播的三个阶段之一（捕获阶段、目标阶段和冒泡阶段）。理解事件捕获对于掌握事件处理机制至关重要，尤其是在需要精确控制事件传播的场景中。

事件捕获是指事件从最外层的祖先元素开始，逐级向下传播到目标元素的过程。这与事件冒泡（从目标元素向上传播）相反。默认情况下，大多数事件处理程序是在冒泡阶段执行的，但通过适当配置，也可以让它们在捕获阶段触发。

== 事件传播的三个阶段 ==
DOM事件传播分为三个阶段：

1. '''捕获阶段'''：事件从window对象向下传播到目标元素的父元素
2. '''目标阶段'''：事件到达目标元素本身
3. '''冒泡阶段'''：事件从目标元素向上冒泡回window对象

<mermaid>
graph TD
    A[Window] -->|捕获阶段| B[Document]
    B --> C[HTML]
    C --> D[Body]
    D -->|目标阶段| E[目标元素]
    E -->|冒泡阶段| D
    D --> C
    C --> B
    B --> A
</mermaid>

== 使用事件捕获 ==
要在捕获阶段处理事件，需要在添加事件监听器时将第三个参数设为`true`：

<syntaxhighlight lang="javascript">
element.addEventListener('click', function(event) {
    console.log('捕获阶段触发');
}, true);  // 注意这里的true
</syntaxhighlight>

== 代码示例 ==
下面是一个完整的示例，展示捕获和冒泡的区别：

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<body>
<div id="grandparent" style="padding: 50px; background-color: lightblue;">
    <div id="parent" style="padding: 30px; background-color: lightgreen;">
        <div id="child" style="padding: 10px; background-color: pink;">
            点击我
        </div>
    </div>
</div>

<script>
    const grandparent = document.getElementById('grandparent');
    const parent = document.getElementById('parent');
    const child = document.getElementById('child');

    // 捕获阶段
    grandparent.addEventListener('click', () => {
        console.log('祖父元素 - 捕获');
    }, true);

    parent.addEventListener('click', () => {
        console.log('父元素 - 捕获');
    }, true);

    // 冒泡阶段（默认）
    grandparent.addEventListener('click', () => {
        console.log('祖父元素 - 冒泡');
    });

    parent.addEventListener('click', () => {
        console.log('父元素 - 冒泡');
    });

    child.addEventListener('click', () => {
        console.log('子元素 - 目标');
    });
</script>
</body>
</html>
</syntaxhighlight>

'''输出结果'''（当点击子元素时）：
<pre>
祖父元素 - 捕获
父元素 - 捕获
子元素 - 目标
父元素 - 冒泡
祖父元素 - 冒泡
</pre>

== 事件捕获的实际应用 ==
事件捕获在以下场景中特别有用：

1. '''提前拦截事件'''：在事件到达目标前进行处理
2. '''事件委托'''：在父元素上处理多个子元素的事件
3. '''阻止默认行为'''：在事件传播早期阶段阻止默认行为

=== 实际案例：下拉菜单 ===
在下拉菜单实现中，可以使用事件捕获来检测点击是否发生在菜单外部：

<syntaxhighlight lang="javascript">
document.addEventListener('click', function(event) {
    if (!event.target.closest('.dropdown')) {
        // 点击在菜单外部，关闭所有下拉菜单
        closeAllDropdowns();
    }
}, true);  // 使用捕获阶段确保最先执行
</syntaxhighlight>

== 停止事件传播 ==
在捕获阶段可以使用`event.stopPropagation()`来阻止事件继续向下传播：

<syntaxhighlight lang="javascript">
element.addEventListener('click', function(event) {
    console.log('这个处理程序会阻止事件继续传播');
    event.stopPropagation();
}, true);
</syntaxhighlight>

== 数学表示 ==
事件传播可以用数学方式表示。设事件从window到目标元素的路径上有<math>n</math>个祖先元素，则：

捕获阶段：<math>E_{capture} = \sum_{i=1}^{n} (handler_{i} \times captureFlag_{i})</math>

其中<math>captureFlag_{i}</math>为1表示在捕获阶段处理，为0表示不在捕获阶段处理。

== 常见问题 ==
=== 1. 为什么我的捕获阶段处理程序没有触发？ ===
确保：
* 使用了`addEventListener`而不是`onclick`等属性
* 第三个参数设置为`true`
* 没有在更早的捕获阶段调用`stopPropagation()`

=== 2. 捕获和冒泡哪个先执行？ ===
捕获阶段先于目标阶段，目标阶段先于冒泡阶段。

=== 3. 所有事件都有捕获阶段吗？ ===
大多数UI事件都有，但某些特殊事件（如focus/blur）没有冒泡阶段。

== 浏览器兼容性 ==
现代浏览器都支持事件捕获。在IE8及更早版本中，事件捕获不可用（仅支持冒泡）。

== 总结 ==
* 事件捕获是DOM事件传播的第一阶段
* 使用`addEventListener`的第三个参数`true`来设置在捕获阶段处理
* 捕获阶段从最外层元素向目标元素传播
* 适用于需要提前拦截事件的场景
* 与事件冒泡配合可以实现强大的事件处理逻辑

理解事件捕获是掌握JavaScript事件系统的关键一步，它为你提供了更精确控制事件流的能力。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript DOM]]