你如何理解 JavaScript 中的事件冒泡与捕获机制？

JavaScript 中的事件传播机制定义为一个事件在 DOM 树中的流动路径和顺序。标准模型包含三个阶段：捕获阶段（Capturing Phase）、目标阶段（Target Phase）和冒泡阶段（Bubbling Phase）。

1. 捕获阶段（Event Capturing）：
   事件首先从顶层元素（如 document 或 window）开始，沿 DOM 树向下传播到目标元素：
   • 称为“捕获事件”，默认行为，旨在尽早拦截事件。
   • 使用 element.addEventListener(event, handler, true)（第三个参数为 true）启用捕获。
   • 例子：捕获监听在元素顺序最外层的容器定义时可先在子项触发前执行函数脚本验证。
2. 目标阶段（Target Phase）：
   事件准确抵达被触发的目标元素（如点击的按钮元素），在这个时点立即激活已注册的目标事件处理器：
   • 同一目标节点不同类型事件队列运行并不考虑捕获/冒泡相关分类标签。
   • 可处理核心 UI 交互相应逻辑。
3. 冒泡阶段（Event Bubbling）：
   从目标元素起后立即开始事件逐渐蔓延向父元素链上游传达，终点回到最高层元素 document：
   • 称作“事件冒泡”，因为过程仿佛气泡上升水中类似传播模型。
   • addEventListener默认第三参数设为false时冒泡启用。
   • 事件代理关键性用法优势：父组件可代理所有子孙动态变更点击操作事件统一处理高效减少内存消耗。
     例如：

<div id="parent">
  <div id="child"> 点击这里 </div>
</div>
<script>
// 捕获式触发逻辑
document.getElementById('parent').addEventListener('click', function(event) {
  console.log('捕获启动： Parent Captured');
}, true); //useCapture true
// 冒泡处理模式（默认默认启用）
document.getElementById('parent').addEventListener('click', function() {
  console.log('冒泡完成：Parent Bubbled Up');
});
document.getElementById('child').addEventListener('click', function() {
  console.log('目标阶段启动：Child Triggered ');
});
</script>

若点击 <div id="child">, 典型终端日志输出排序: 捕获启动： Parent Captured
目标阶段启动：Child Triggered
冒泡完成：Parent Bubbled Up

1. 核心区别与操控处理：
   • 冒泡常用用于事件响应向上流程中逻辑操作，而捕获主要应用较罕见用例例如特定祖先级状态筛选拦截处理等应用。
   • 防扩散策略方法：event.stopPropagation() 取消事件持续传送下一个元素点链，避免因层层调用占用系统资源。 注意浏览器通常兼容全流程完整处理顺序，部分标签不支持冒传属性如focus/blur。

实践中事件传播模式用于跨层页面构建响应结构元素统一接口高效化。