4.深入 addEventListener

用户8691

2025年9月9日修改

我们最常用的 element.addEventListener('click', handler) 写法，其实只用到了它的前两个参数。addEventListener 的第三个参数，可以极大地改变事件监听的行为，主要涉及两个关键概念：事件的“捕获”阶段和滚动性能的“被动”优化。​

1. 事件的完整生命周期：捕获与冒泡

当一个事件发生时，它在 DOM 中的传播分为三个阶段：

1.
捕获阶段 (Capturing Phase): 事件从最外层的祖先元素（window）开始，逐级“向下”传播，直到达到真正的目标元素。​

2.
目标阶段 (Target Phase): 事件到达目标元素。​

3.
冒泡阶段 (Bubbling Phase): 事件从目标元素开始，逐级“向上”冒泡，直到再次回到 window。​
​

默认情况下，所有事件监听器都在“冒泡阶段”执行。

2. useCapture: 在捕获阶段监听

addEventListener 的第三个参数，如果传入一个布尔值 true，或者一个包含 capture: true 的对象，就可以让事件监听器在捕获阶段被触发。​

•

语法:

代码块

// 传统方式​
element.addEventListener('click', handler, true);​
​
// 现代方式（推荐）​
element.addEventListener('click', handler, { capture: true });​

•
作用: 允许你比目标元素更早地、在事件“下沉”的过程中就拦截到它。​

•
核心场景: 通常用于需要在事件到达最终目标前，就进行统一拦截处理的场景。虽然不常用，但在框架或大型应用的顶层事件分析、日志记录或阻止某些行为时可能有用。​
​

示例：观察捕获与冒泡的顺序

HTML 结构:

代码块

<div id="parent">​
  Parent​
  <p id="child">Child</p>​
</div>​

JavaScript 实现:

代码块

const parent = document.getElementById('parent');​
const child = document.getElementById('child');​
​
// 在 Parent 上设置一个捕获阶段的监听器​
parent.addEventListener('click', () => {​
  console.log('1. Parent - Capturing');​
}, { capture: true }); // 或直接用 true​
​
// 在 Parent 上设置一个冒泡阶段的监听器（默认）​
parent.addEventListener('click', () => {​
  console.log('4. Parent - Bubbling');​
}, { capture: false }); // 或不写第三个参数​
​
// 在 Child 上设置监听器（目标阶段）​
child.addEventListener('click', () => {​
  console.log('2. Child - Target/Bubbling Start');​
  // 注意：目标阶段的触发顺序遵循代码注册顺序​
});​
​
child.addEventListener('click', () => {​
    console.log('3. Child - Also on Target');​
});​

4.深入 addEventListener​

4.深入 addEventListener