说一下事件传播机制
1. 概念
事件传播机制指的是事件在 DOM 树中传播的过程，当事件发生在某个元素时，浏览器会按照一定顺序触发对应元素的事件处理函数。
2. 三个阶段
浏览器标准事件传播分为 三个阶段：
| 阶段 | 说明 |
|---|---|
| 捕获阶段（Capturing Phase） | 事件从 document → 父元素 → 目标元素 依次向下传播，可捕获事件 |
| 目标阶段（Target Phase） | 事件到达 目标元素，先触发目标元素的捕获事件，再触发冒泡事件 |
| 冒泡阶段（Bubbling Phase） | 事件从 目标元素 → 父元素 → document 向上冒泡，触发绑定的冒泡事件 |
注意：并不是所有事件都支持冒泡，例如 focus、blur 默认不冒泡，但有 focusin/focusout 支持冒泡。
3. addEventListener 的第三个参数
element.addEventListener('click', handler, useCapture);
-
useCapture = true → 捕获阶段触发
-
useCapture = false → 冒泡阶段触发（默认）
示例
<div id="parent"><button id="child">Click me</button>
</div>
const parent = document.getElementById('parent');
const child = document.getElementById('child');// 捕获阶段
parent.addEventListener('click', () => console.log('parent capture'), true);// 冒泡阶段
parent.addEventListener('click', () => console.log('parent bubble'), false);child.addEventListener('click', () => console.log('child bubble'), false);
点击按钮的输出顺序：
parent capture → child bubble → parent bubble
4. stopPropagation 与 stopImmediatePropagation
-
event.stopPropagation()
- 阻止事件向上或向下传播，但当前元素的其他同类型事件仍会触发
-
event.stopImmediatePropagation()
- 阻止事件传播，并且阻止当前元素上同类型的其他事件触发
5. 事件委托与传播机制关系
-
事件委托依赖 冒泡阶段
-
绑定在父元素的事件会在子元素触发事件后被捕获到
ul.addEventListener('click', e => {console.log(e.target); // 实际触发事件的子元素
});