说一下事件传播机制

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); // 实际触发事件的子元素
});