javascript的事件冒泡和捕获机制是什么_如何正确使用事件委托

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

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

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

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

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

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

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

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

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

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

标签： javascript java html 浏览器 事件冒泡 win 事件捕获