JavaScript中事件冒泡与捕获如何区分和运用？
- 内容介绍
- 文章标签
- 相关推荐
本文共计929个文字，预计阅读时间需要4分钟。
请提供需要改写的原文内容，以便我进行修改。
事件捕获阶段：从 window 到目标元素的“下行路径”
当点击一个嵌套很深的 <button> 时，事件会先从 window 开始，依次经过 document、<html>、<body>、外层 <div>……最后到达那个 <button>。这个过程叫捕获阶段。
只有显式开启才能监听它：addEventListener(type, handler, true) 或 addEventListener(type, handler, { capture: true })。
- 默认不启用，所以大多数
addEventListener都只响应冒泡阶段 - 捕获阶段无法通过
event.stopPropagation()中断冒泡（因为冒泡还没开始） - 适合做全局拦截，比如在
<body>捕获所有点击前统一做权限判断
事件冒泡阶段：从目标元素到 window 的“上行路径”
点击 <button> 后，事件会反过来，从它自己出发，逐级向上传给父 <div>、<body>、document、window。这是默认行为，也是日常最常打交道的阶段。
本文共计929个文字，预计阅读时间需要4分钟。
请提供需要改写的原文内容，以便我进行修改。
事件捕获阶段：从 window 到目标元素的“下行路径”
当点击一个嵌套很深的 <button> 时，事件会先从 window 开始，依次经过 document、<html>、<body>、外层 <div>……最后到达那个 <button>。这个过程叫捕获阶段。
只有显式开启才能监听它：addEventListener(type, handler, true) 或 addEventListener(type, handler, { capture: true })。
- 默认不启用，所以大多数
addEventListener都只响应冒泡阶段 - 捕获阶段无法通过
event.stopPropagation()中断冒泡（因为冒泡还没开始） - 适合做全局拦截，比如在
<body>捕获所有点击前统一做权限判断
事件冒泡阶段：从目标元素到 window 的“上行路径”
点击 <button> 后，事件会反过来，从它自己出发，逐级向上传给父 <div>、<body>、document、window。这是默认行为，也是日常最常打交道的阶段。