什么是事件捕获事件捕获机制全网首发(图文详解1)

什么是事件捕获

事件捕获是 Web 事件处理的一种机制。在传统的事件处理中，当一个事件发生时，它会直接在触发事件的元素上被处理（这被称为“事件冒泡”）。而事件捕获则是相反的过程，事件从最外层的元素开始捕获，直到达到触发事件的具体元素。

事件捕获的实现与事件监听有关。在 JavaScript 中，可以通过 addEventListener 函数为元素添加事件监听，函数的第三个参数决定了是采用事件冒泡还是事件捕获的方式。如果该参数为 true，则表示采用事件捕获机制；如果为 false 或者不设置，则表示采用事件冒泡机制。

以下是一个事件捕获的示例开发流程，包含了详细的代码和配置过程：

HTML结构设置：假设我们有如下的 HTML 结构：


<div id="parent"><button id="child">点击我</button></div>

JavaScript 代码实现：
我们为 #parent 元素添加事件监听，采用事件捕获的方式：
```
document.getElementById('parent').addEventListener('click', function(event) {
   alert('事件已被父元素捕获');
}, true); // 注意这里的 true，表示采用事件捕获
document.getElementById('child').addEventListener('click', function(event) {
   alert('事件在子元素上被触发');
});
```
以上代码中，当点击按钮（即 #child 元素）时，首先弹窗提示“事件已被父元素捕获”，然后弹出“事件在子元素上被触发”。这展示了事件从父元素开始捕获，然后传递到子元素的过程。
注释解释：
- 首先通过 getElementById 方法获取到 div （父元素）和 button （子元素）。
- 使用 addEventListener 为父元素添加点击事件的监听，并设置第三个参数为 true，表示采用的是事件捕获机制。
- 同样为子元素也添加点击事件监听，但未指定第三个参数，默认为事件冒泡机制。
- 因此，点击子元素时，先触发父元素的事件捕获，然后触发子元素自身的事件。