JavaScript事件流包含捕获（从window到目标）和冒泡（从目标到document）两个阶段；事件委托是利用冒泡特性在父元素统一监听子元素事件的优化策略。

JavaScript事件冒泡和捕获是DOM事件传播的两个核心阶段，共同构成完整的事件流；事件委托则是基于冒泡机制的实用优化策略，不是独立机制，而是对冒泡特性的巧妙运用。

事件冒泡：从目标向上逐层触发

当点击一个嵌套结构中的子元素（比如按钮），事件会先在该元素上触发，然后依次向上传播到父元素、祖父元素，直至document。这是默认行为，无需额外配置。

• 例如：<div id="outer"><div id="inner"><button>点我</button></div></div>，点击按钮后，执行顺序为：button → inner → outer → body → html → document
• 可通过e.stopPropagation()中途阻止继续冒泡，但不影响当前元素上已绑定的其他监听器
• 适合在父级统一监听子元素行为，比如菜单项点击、列表项操作

事件捕获：从根节点向下预拦截

与冒泡相反，捕获阶段从window开始，经过document、html、body，逐层向下到达目标元素。它发生在冒泡之前，属于事件流的“第一站”。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 启用方式：在addEventListener第三个参数传true或{ capture: true }
• 常用于全局前置处理，如权限校验、埋点日志、表单输入过滤等，在事件到达具体目标前介入
• 注意：IE早期版本不支持捕获，现代浏览器已全面兼容

事件委托：用一个监听器管住一群子元素

利用冒泡原理，把事件监听绑定在父容器上，通过e.target识别真正被点击的子元素，避免为每个子项单独绑定事件。

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

• 典型场景：动态添加的列表项、大量表格行、无限滚动内容
• 写法示例：

  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等事件的触发时机差异