JavaScript中的事件冒泡、捕获与委托

事件冒泡指事件从目标元素向上逐层传递，可通过stopPropagation阻止；事件捕获是从外向内传递，需设addEventListener第三参数为true；事件委托利用冒泡机制将事件绑定到父元素，通过event.target处理子元素事件，减少内存占用并提升性能。

在JavaScript中，事件处理是前端开发的核心内容之一。理解事件冒泡、捕获和事件委托机制，有助于写出更高效、可维护的交互代码。下面分别介绍这三个概念及其实际应用。

事件冒泡（Event Bubbling）

事件冒泡指的是当一个元素触发事件后，该事件会从最内层的目标元素向上传播到父级元素，逐层触发祖先元素上绑定的同类型事件。

例如点击一个按钮，这个按钮嵌套在多个div中，那么点击事件会先触发按钮本身的处理函数，然后依次向上触发父div、祖父div等的点击事件。

• 默认情况下，大多数事件都遵循冒泡机制
• 可通过 event.stopPropagation() 阻止冒泡
• 适合用于需要父容器响应子元素事件的场景

事件捕获（Event Capturing）

事件捕获是事件流的另一个阶段，发生在事件冒泡之前。它从最外层的祖先元素开始，逐层向下传递，直到达到目标元素。

立即学习“Java免费学习笔记（深入）”；

捕获阶段常被忽略，但在某些高级场景中非常有用，比如全局点击拦截或性能优化。

ListenLeap

AI辅助通过播客学英语

101

查看详情

• 在添加事件监听时设置第三个参数为 true：
  element.addEventListener('click', handler, true)
• 如果不指定或设为false，则监听器在冒泡阶段触发

事件委托（Event Delegation）

事件委托利用事件冒泡的特性，将事件监听器绑定在父元素上，用来处理其子元素的事件。特别适用于动态生成的内容或大量相似元素。

比如一个无序列表中有几十个li，每个都需要响应点击，不必为每个li单独绑定事件，只需为ul绑定一次即可。

• 监听父元素上的事件
• 通过 event.target 判断具体是哪个子元素触发了事件
• 执行对应逻辑

示例代码：

<font face="Courier New">
document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('点击了:', e.target.textContent);
  }
});
</font>

基本上就这些。掌握事件的三个阶段和委托技巧，能显著减少内存占用，提升页面性能，也便于管理动态内容的事件绑定。

以上就是JavaScript中的事件冒泡、捕获与委托的详细内容，更多请关注php中文网其它相关文章！