【前端每天一题】🔥第7题 事件冒泡与事件捕获 - 前端高频面试题

这是前端高频面试题的详细版 + 速记卡版，可以直接用在面试里。

第 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()