这是前端高频面试题的详细版 + 速记卡版，可以直接用在面试里。
第 7 题：事件冒泡和事件捕获的区别？如何阻止事件冒泡？如何阻止默认行为？
一、事件冒泡（Event Bubbling）是什么？
事件从 最内层元素（target） 一直向 外层父级元素 传播，直到最顶层（document）。
传播顺序：
target → parent → document
示例：
HTML：
<div id="outer">
<div id="inner"></div>
</div>
点击 inner 时，顺序是：
inner → outer → document
冒泡是浏览器默认的事件传播机制。
二、事件捕获（Event Capturing）是什么？
事件从 最外层（document） 往 目标元素（target） 方向传播。
传播顺序：
document → parent → target
三、浏览器完整的事件流阶段
事件流包含 三个阶段：
1. 捕获阶段（从外到内）
2. 目标阶段（target 本身）
3. 冒泡阶段（从内到外）
图示：
document
↓ (捕获)
parent
↓
target
↑ (冒泡)
parent
↑
document
四、addEventListener 如何指定阶段？
语法：
element.addEventListener(event, handler, useCapture)
第三个参数：
true→ 捕获阶段执行false→ 冒泡阶段执行（默认）
示例：
div.addEventListener('click', handler, true) // 捕获
div.addEventListener('click', handler, false) // 冒泡
五、如何阻止事件冒泡？
方式 1：标准方法（推荐）
event.stopPropagation()
方式 2：阻止所有传播（包括捕获 + 冒泡）
event.stopImmediatePropagation()
⚠️ 并且会阻止"同一元素上后续绑定的回调函数"。
🚫 重要说明：return false 并不会阻止冒泡
原生 DOM 中：
return false
只能阻止默认行为，不会阻止冒泡。
（除非在 jQuery 中）
六、如何阻止默认行为？
方法 1：标准方法
event.preventDefault()
方法 2：在标签内直接 return false（只阻止默认行为）
<a href="#" onclick="return false">点击</a>
方法 3：表单中阻止提交
form.addEventListener("submit", e => e.preventDefault())
七、快速对比总结表
| 行为 | 方法 | 作用 |
|---|---|---|
| 阻止冒泡 | event.stopPropagation() | 阻止事件向父级继续冒泡 |
| 阻止所有传播 | event.stopImmediatePropagation() | 同节点后续事件也不再触发 |
| 阻止默认行为 | event.preventDefault() | 阻止浏览器的默认动作（跳转、滚动、提交等） |
| return false | 部分情况下等于 preventDefault | 原生不会阻止冒泡 |
速记卡（10 秒复习版）
🔶 捕获：从外到内
document → ... → target
🔶 冒泡：从内到外
target → ... → document
🔶 阻止冒泡
event.stopPropagation()
🔶 阻止所有传播（包括同级绑定事件）
event.stopImmediatePropagation()
🔶 阻止默认行为
event.preventDefault()
