首页 > 文章 > 前端

事件委托与冒泡机制解析

时间：2026-02-27 09:55:44 420浏览收藏

DOM事件的冒泡与捕获机制是JavaScript交互开发的核心基础，它们共同构成了事件传播的完整路径——从window逐层捕获至目标元素，再由目标向上冒泡回根节点；而事件委托正是巧妙利用冒泡特性，将大量子元素事件统一交由父元素处理，既显著减少内存开销、提升性能，又天然支持动态添加的DOM元素，让代码更简洁、健壮且易于维护；掌握`stopPropagation()`、`preventDefault()`等控制方法，并在实践中明确指定事件阶段，是写出高效、可读、可扩展前端交互逻辑的关键所在。

JavaScript事件委托与冒泡捕获机制

JavaScript中的事件委托和事件冒泡、捕获机制是理解DOM事件处理的关键。它们共同作用，使开发者能更高效地管理页面中的交互行为。

事件冒泡与捕获流程

当用户触发一个DOM元素上的事件（如点击），浏览器会经历三个阶段：

捕获阶段：事件从window开始，逐级向下传递，经过document、html、body，直到目标元素的父级
目标阶段：事件到达绑定事件的目标元素本身
冒泡阶段：事件从目标元素向上逐级传播回根节点

默认情况下，事件监听器在冒泡阶段执行。如果需要在捕获阶段处理事件，可以设置addEventListener的第三个参数为true，或使用{ capture: true }选项。

举例：点击一个按钮时，事件先经过外层div（捕获），再到达button（目标），然后沿原路返回（冒泡）。

事件委托的实现原理

事件委托利用事件冒泡机制，将子元素的事件监听绑定到其父元素上。通过检查事件对象的target属性，判断实际触发事件的元素。

这种方法特别适合动态内容或大量相似元素的场景，比如列表项、表格单元格等。

减少内存占用，避免为每个子元素单独绑定事件
支持动态添加的元素自动具备事件处理能力
简化事件管理和解绑操作

例如，在一个无序列表中，无需为每个

绑定点击事件，只需在

document.querySelector('ul').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('点击了:', e.target.textContent);
  }
});