JS事件冒泡和事件捕获

在JavaScript中，事件冒泡（Event Bubbling）和事件捕获（Event Capturing）是两种不同的事件传播机制。当你在DOM元素上注册事件时，事件的触发并不会立即发生，而是会按照一定的顺序进行传播。事件的传播机制决定了事件如何从目标元素传递到DOM树中的其他元素。

目录

事件捕获和事件冒泡的提出

为什么整合了捕获和冒泡机制？

事件传播的顺序

具体例子实现

---

事件捕获和事件冒泡的提出

• 事件冒泡 最早由 微软 在 Internet Explorer 中提出，作为一种事件传播机制。当用户与元素交互时，事件从目标元素开始，逐层向父元素传播，直到 document。

• 事件捕获 是后来由 W3C 引入的，它与冒泡机制相反，事件从最外层的祖先元素开始传播，逐层向目标元素传递，直到事件到达目标元素。

为什么整合了捕获和冒泡机制？

捕获和冒泡机制被整合到浏览器事件模型中，目的是为了提供更细粒度的控制，让开发者能够根据需求选择何时触发事件，并控制事件的传播路径。具体原因如下：

• 事件捕获 允许开发者在事件到达目标元素之前进行处理，适用于某些需要提前干预的场景。
• 事件冒泡 允许开发者在事件到达目标元素之后逐层向上传播，适用于处理从目标元素到更高层的所有相关逻辑。

事件传播的顺序

在现代浏览器中，事件会按以下顺序传播：

1. 事件捕获阶段：事件从根元素（document）开始，向下传播到目标元素（如果事件监听器启用了捕获）。
2. 事件目标阶段：事件到达目标元素并触发目标元素的事件处理程序。
3. 事件冒泡阶段：事件从目标元素开始，向上传播至父元素，直到根元素。 

具体例子实现

1.事件冒泡从内部向外，事件捕获从外部向内

2.如果开启了事件捕获，需要在 addEventListener 方法中传递第三个参数 true，捕获和冒泡同时存在，先捕获后冒泡

3.如果同时开启了多个事件捕获，先外后内

4.阻止事件冒泡：e.stopPropagation()