1.事件流：捕获与冒泡
输入“/”快速插入内容
1.事件流：捕获与冒泡
1.事件流：捕获与冒泡
用户8691用户86912025年9月9日修改
1. 核心心智模型
当你在网页上点击一个元素时，这个“点击事件”并不仅仅发生在该元素上。它经历了一个完整的旅程，这个旅程被称为 DOM 事件流 (Event Flow)。
想象一下一个三层嵌套的盒子：div (外层) > p (中层) > span (内层)。当你点击最里面的 span 时：
1.
捕获阶段 (Capturing Phase): 浏览器会从最外层的祖先 window 开始，像一个“指挥官”下达命令一样，逐级向下“探查”，经过 document、<html>、<body>、div、p，最终到达你点击的目标 span。这个从外到内的过程就是捕获阶段。
2.
目标阶段 (Target Phase): 事件到达了它的最终目的地——你实际点击的 span 元素。事件在这里被触发。
3.
冒泡阶段 (Bubbling Phase): 事件完成任务后，开始“汇报工作”。它会从 span 开始，逐级向上“冒泡”，经过 p、div，一直到 window。这个从内到外的过程就是冒泡阶段。
一句话总结：事件先从外到内“潜入”（捕获），到达目标后，再从内到外“浮出”（冒泡）。
默认情况下，我们用 addEventListener 添加的监听器只在 冒泡阶段 执行。
2. 示例：在控制台直观展示事件流
让我们用代码来直观地看到这个完整的路径。
HTML 结构:
代码块
<div class="grandparent">
Grandparent
<div class="parent">
Parent
<div class="child">Child</div>
</div>
</div>
CSS (仅为视觉效果):
代码块
div {
padding: 30px;
border: 2px solid #666;
text-align: center;
font-family: sans-serif;
}
.grandparent { background-color: #fdd; }
.parent { background-color: #dfd; }
.child { background-color: #ddf; }
JavaScript 实现:
我们将为每一个 div 都添加两个监听器：
•
一个在捕获阶段触发 ({ capture: true })
•
一个在冒泡阶段触发 (默认)
代码块
const grandparent = document.querySelector('.grandparent');
const parent = document.querySelector('.parent');
const child = document.querySelector('.child');
// --- 捕获阶段监听器 ---
grandparent.addEventListener('click', () => {
console.log('Grandparent - 捕获阶段');
}, { capture: true });
parent.addEventListener('click', () => {
console.log('Parent - 捕获阶段');
}, { capture: true });
child.addEventListener('click', () => {
console.log('Child - 捕获阶段 (也会在目标阶段触发)');
}, { capture: true });
// --- 冒泡阶段监听器 ---
grandparent.addEventListener('click', () => {
console.log('Grandparent - 冒泡阶段');
});
parent.addEventListener('click', () => {
console.log('Parent - 冒泡阶段');
});
child.addEventListener('click', () => {
console.log('Child - 冒泡阶段');
});