DOM 事件传播分为 三个阶段：

• 捕获阶段（Capture Phase）：事件从 window 向下传播，经过层层父元素，最终到达目标元素。方向是从外到内。
• 目标阶段（Target Phase）：事件到达实际触发事件的元素（即 event.target）。
• 冒泡阶段（Bubble Phase）：事件从目标元素向上冒泡，依次经过父元素，最终到达 window。方向是从内到外。

使用 addEventListener(type, handler, useCapture) 的第三个参数可以指定在哪个阶段触发监听器。true 表示捕获阶段，false（默认）表示冒泡阶段。

event.stopPropagation() 用于阻止事件继续传播到后续元素。在捕获阶段调用会阻止事件继续向下传播（目标元素也不会收到事件）；在冒泡阶段调用会阻止事件继续向上冒泡。

注意：stopPropagation() 仅阻止传播，不影响当前元素上的其他同阶段监听器。如需完全阻止（包括当前元素的其他监听器），可使用 event.stopImmediatePropagation()。

事件委托是利用事件冒泡机制，将监听器绑定在父元素上，通过 event.target 判断实际触发事件的子元素。优势包括：

• 减少监听器数量，提升性能（尤其是大量子元素时）。
• 动态添加的子元素自动获得事件处理能力，无需重新绑定。
• 代码更简洁，维护更方便。

常见应用场景：列表项点击、表格行操作、动态生成的按钮等。

第三个参数可以是：

• false（默认）：监听器在冒泡阶段触发。
• true：监听器在捕获阶段触发。
• 一个配置对象 { capture, once, passive, signal }：
  • capture: boolean — 同上述 true/false。
  • once: boolean — 监听器只触发一次后自动移除。
  • passive: boolean — 指示不会调用 preventDefault()，可用于提升滚动性能。
  • signal: AbortSignal — 通过 AbortController 移除监听器。

在捕获阶段的任意父元素上调用 event.stopPropagation()，事件将停止继续向下传播，目标元素及其后续捕获监听器都不会收到事件。在本工具中，你可以勾选某个元素的"捕获阶段 stopPropagation"来观察效果——事件将在该元素处被拦截，不再继续向内传播。