说一下事件传播机制

最新推荐文章于 2025-08-20 08:31:22 发布

原创最新推荐文章于 2025-08-20 08:31:22 发布 · 317 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #笔记

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