事件冒泡指事件从目标元素向上逐层传递，可通过stopPropagation阻止；事件捕获是从外向内传递，需设addEventListener第三参数为true；事件委托利用冒泡机制将事件绑定到父元素，通过event.target处理子元素事件，减少内存占用并提升性能。
在JavaScript中，事件处理是前端开发的核心内容之一。理解事件冒泡、捕获和事件委托机制，有助于写出更高效、可维护的交互代码。下面分别介绍这三个概念及其实际应用。
事件冒泡（Event Bubbling）
事件冒泡指的是当一个元素触发事件后，该事件会从最内层的目标元素向上传播到父级元素，逐层触发祖先元素上绑定的同类型事件。
例如点击一个按钮，这个按钮嵌套在多个div中，那么点击事件会先触发按钮本身的处理函数，然后依次向上触发父div、祖父div等的点击事件。
常见行为：- 默认情况下，大多数事件都遵循冒泡机制
- 可通过 event.stopPropagation() 阻止冒泡
- 适合用于需要父容器响应子元素事件的场景
事件捕获（Event Capturing）
事件捕获是事件流的另一个阶段，发生在事件冒泡之前。它从最外层的祖先元素开始，逐层向下传递，直到达到目标元素。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
捕获阶段常被忽略，但在某些高级场景中非常有用，比如全局点击拦截或性能优化。
使用方式：- 在添加事件监听时设置第三个参数为 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>
基本上就这些。掌握事件的三个阶段和委托技巧，能显著减少内存占用，提升页面性能，也便于管理动态内容的事件绑定。
