[特殊字符] JavaScript 事件流完全指南：从捕获到冒泡，彻底搞懂事件机制-优快云博客

作者：夏天训练营
标签：JavaScript 事件流 事件冒泡 事件捕获 addEventListener 前端基础

在前端开发中，事件是用户与页面交互的核心。但你是否曾被“事件流”、“冒泡”、“捕获”、“stopPropagation”这些概念绕晕？
别担心！本文将用生活化比喻 + 代码实例，带你从零彻底搞懂 JavaScript 事件流机制，让你不再“似懂非懂”。

事件流（Event Flow）描述的是：当一个事件（如点击）发生时，它在 DOM 树中传播的完整路径。

它分为三个阶段：

阶段	说明
捕获阶段（Capture Phase）	事件从 `window` → `document` → `<html>` → `<body>` → 一路“冲进”目标元素（从外到内）
目标阶段（Target Phase）	事件到达真正被点击的元素
冒泡阶段（Bubbling Phase）	事件从目标元素“弹出”，一路返回到 `window`（从内到外）

✅ 完整流程：捕获 → 目标 → 冒泡

想象你住在一个三层复式公寓：

快递员先敲大门 → 客厅 → 房间
→ 事件从外向内传播

你收到包裹，喊“谢谢” → 声音传到客厅 → 大门
→ 事件从内向外传播

btn.addEventListener('click', () => {
  console.log('我被点击了！');
});

btn.addEventListener('click', fn, true); // 第三个参数为 true

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="special">Item 3（特殊）</li>
</ul>

list.addEventListener('click', (e) => {
  // e.target 是真正被点击的 li
  if (e.target.classList.contains('special')) {
    alert('你点了第3个 li！');
  }
});

✅ 优点：无需给每个 li 绑定事件，性能更好，动态元素也适用。

方法	作用
`e.stopPropagation()`	❌ 阻止事件冒泡到父元素 ✅ 但同一元素的其他监听器仍会执行
`e.stopImmediatePropagation()`	❌ 阻止冒泡 ❌ 且阻止当前元素后续所有监听器执行

el.addEventListener('click', e => {
  e.stopImmediatePropagation(); // 全给我闭嘴！
});

btn.addEventListener('click', handleClick);
//        ↑           ↑
//        |           └── 事件监听器
//        └── 注册方法

btn.click(); // 主动触发点击

⚠️ focus 等事件不会冒泡，只能在目标元素或捕获阶段监听。

事件流是前端开发的基石，理解它，才能写出高效、可维护的交互逻辑。
希望本文能帮你彻底扫清疑惑，欢迎点赞、收藏、转发！

我是夏天训练营，一个热爱分享的前端学习者。
关注我，一起探索更多前端奥秘！🌿