JavaScript事件流包含捕获（从window到目标）和冒泡（从目标到document）两个阶段；事件委托是利用冒泡特性在父元素统一监听子元素事件的优化策略。
JavaScript事件冒泡和捕获是DOM事件传播的两个核心阶段，共同构成完整的事件流；事件委托则是基于冒泡机制的实用优化策略，不是独立机制，而是对冒泡特性的巧妙运用。
事件冒泡：从目标向上逐层触发
当点击一个嵌套结构
中的子元素（比如按钮），事件会先在该元素上触发，然后依次向上传播到父元素、祖父元素，直至document。这是默认行为，无需额外配置。
- 例如：
，点击按钮后，执行顺序为：button → inner → outer → body → html → document - 可通过
e.stopPropagation()中途阻止继续冒泡，但不影响当前元素上已绑定的其他监听器 - 适合在父级统一监听子元素行为，比如菜单项点击、列表项操作
事件捕获：从根节点向下预拦截
与冒泡相反，捕获阶段从window开始，经过document、html、body，逐层向下到达目标元素。它发生在冒泡之前，属于事件流的“第一站”。
- 启用方式：在
addEventListener第三个参数传true或{ capture: true } - 常用于全局前置处理，如权限校验、埋点日志、表单输入过滤等，在事件到达具体目标前介入
- 注意：IE早期版本不支持捕获，现代浏览器已全面兼容
事件委托：用一个监听器管住一群子元素
利用冒泡原理，把事件监听绑定在父容器上，通过e.target识别真正被点击的子元素，避免为每个子项单独绑定事件。
- 典型场景：动态添加的列表项、大量表格行、无限滚动内容
- 写法示例：
const list = document.getElementById('myList');list.addEventListener('click', function(e) { if (e.target.tagName === 'LI') { console.log('点击了列表项：', e.target.textContent); }}); - 优势明显：节省内存、自动响应新增节点、简化事件管理与解绑逻辑
- 关键细节：确保父容器稳定存在，且子元素触发的事件能正常冒泡（如
pointer-events: none会中断）
使用建议与避坑提示
实际开发中，多数交互逻辑依赖冒泡，捕获仅在特定预处理场景下启用；事件委托应成为处理重复子元素事件的首选方案。
- 不要在冒泡和捕获阶段对同一事件做冲突操作（比如一个阻止默认，一个又触发提交）
- 慎用
e.stopImmediatePropagation()——它会跳过同阶段其余监听器，调试时容易遗漏 - 委托时优先用
e.target而非this，因为this指向绑定事件的父元素，而e.target才是真实触发者 - 表单控件（如input、select）也支持委托，但需注意change、input等事件的触发时机差异
