【高频考点精讲】JavaScript中的事件冒泡和捕获，90%的人都理解错了

JavaScript事件冒泡与捕获：90%的前端工程师都理解错了

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊一个看似简单实则暗藏玄机的话题——JavaScript中的事件冒泡和捕获机制。说实话，我见过太多工作了3-5年的前端，对这个基础概念还是一知半解，面试时经常被问得支支吾吾。

事件流：从点击到响应的旅程

想象你在网页上点击一个按钮，这个点击动作可不是直接"啪"的一下就传到按钮上的。浏览器实际上经历了一个完整的"事件旅程"——这就是事件流。

事件流分为三个阶段：

1. 捕获阶段：事件从window对象一路向下"潜行"，直到找到目标元素
2. 目标阶段：事件到达实际被点击的元素
3. 冒泡阶段：事件从目标元素开始"冒泡"向上，直到回到window对象

// 全栈老李提示：这个示例展示了完整的事件流过程
document.getElementById('outer').addEventListener('click', function() {
   
  console.log('捕获阶段 - outer');
}, true); // 注意这里的true表示捕获阶段

document.getElementById('inner').addEventListener('click', function() {
   
  console.log('目标阶段 - inner');
}); // 默认是冒泡阶段

document.getElementById('outer').addEventListener('click',