在JavaScript的DOM事件体系中，事件冒泡是一个基础且重要的概念，很多初学者第一次遇到相关问题时都会感到困惑，不知道为什么点击子元素会触发父级的事件。下面我们就一步步拆解事件冒泡的相关内容。
什么是事件冒泡
事件冒泡指的是当某个DOM元素触发事件之后，该事件不会只停留在当前元素上，而是会按照DOM树的层级结构，从触发事件的元素开始，依次向上传播到父元素、祖父元素，直到最顶层的document对象。简单来说就是事件从内向外逐层传递的过程。
比如我们有一个嵌套的div结构，子div触发点击事件后，父div、body等上层元素的点击事件也会被依次触发，这就是典型的事件冒泡现象。
事件冒泡的触发流程
DOM事件流分为三个阶段：捕获阶段、目标阶段、冒泡阶段。事件冒泡发生在冒泡阶段，流程如下：
- 用户操作触发某个元素的事件，首先进入事件捕获阶段，事件从最外层document向下传递到目标元素
- 到达目标元素后进入目标阶段，执行目标元素绑定的事件处理函数
- 目标阶段结束后进入冒泡阶段，事件从目标元素开始向上逐层传递到最外层document，每经过一层就执行该层绑定的对应事件处理函数
事件冒泡的代码示例
下面我们通过一段简单的代码来直观感受事件冒泡的效果，先准备如下HTML结构：
<div id="parent" style="width: 200px; height: 200px; background: #ccc;">
父元素
<div id="child" style="width: 100px; height: 100px; background: #ff0000;">
子元素
</div>
</div>然后给父元素和子元素都绑定点击事件：
// 获取父元素和子元素
const parent = document.getElementById('parent');
const child = document.getElementById('child');
// 给父元素绑定点击事件
parent.addEventListener('click', function() {
console.log('父元素被点击了');
});
// 给子元素绑定点击事件
child.addEventListener('click', function() {
console.log('子元素被点击了');
});运行代码后，点击红色子元素，控制台会依次输出子元素被点击了和父元素被点击了，这就是事件冒泡的体现，子元素的点击事件触发后向上传递到了父元素。
如何阻止事件冒泡
很多时候我们不希望事件冒泡触发上层元素的事件，这时候就需要阻止事件冒泡。在事件处理函数中，我们可以调用事件对象的stopPropagation()方法来实现。
修改上面的子元素点击事件代码：
// 给子元素绑定点击事件，阻止冒泡
child.addEventListener('click', function(e) {
console.log('子元素被点击了');
// 阻止事件冒泡
e.stopPropagation();
});再次点击子元素，控制台只会输出子元素被点击了，父元素的点击事件不会再被触发，说明事件冒泡已经被成功阻止。
事件冒泡的实际应用场景
事件冒泡并不是只有坏处，合理利用它可以简化事件绑定的逻辑。比如我们有一列列表项，每个列表项都需要绑定点击事件，不需要给每个列表项单独绑定，只需要给父元素绑定一次事件，利用事件冒泡，点击每个子列表项时事件会冒泡到父元素，再通过事件对象的target属性判断具体点击的是哪个子元素即可，这种方式也叫事件委托。
事件委托的示例代码如下：
// 获取列表父元素
const list = document.getElementById('list');
// 给父元素绑定点击事件
list.addEventListener('click', function(e) {
// 判断点击的是否是li元素
if (e.target.tagName === 'LI') {
console.log('点击了列表项：', e.target.innerText);
}
});这种方式可以减少事件绑定的数量，提升页面性能，尤其是当列表项数量很多或者动态新增列表项的时候，不需要每次新增都重新绑定事件，非常方便。
JavaScript事件冒泡事件流DOM事件修改时间：2026-05-30 00:09:48