最有效的综合实战是构建可视化项目观察事件三阶段：一、三层嵌套DOM统一绑定捕获/冒泡监听器并打印阶段；二、输出target/currentTarget/eventPhase辨析执行细节；三、用按钮实现stopPropagation等干预验证；四、扩展事件委托提升性能。
直接上手做一个能看清捕获、目标、冒泡三阶段执行顺序的可视化项目，是最有效的综合实战方式。核心不在于功能多复杂，而在于结构清晰、日志明确、可对比、可干预。
一、搭建三层嵌套 DOM 结构并统一绑定点击事件
用最简 HTML 构建一个有明确层级关系的结构，比如：body → #outer → #inner → #target。每个节点都绑定同一个事件类型（如 click），但分别在捕获和冒泡阶段注册，便于观察执行流。
- 给
document.body、#outer、#inner、#target都添加 click 监听器 - 对每个元素，各注册两个监听器：一个
useCapture = true（捕获），一个useCapture = false（冒泡） - 每个监听器里用
console.log(`${element.id} - ${phase}`)打印阶段标识，例如"outer - 捕获"
二、实时显示事件对象关键属性变化
在每个监听器中输出 event.target、event.currentTarget 和 event.eventPhase，帮助理解“谁触发了事件”和“当前在哪一阶段”。
jm-jsjkxyjs02-zlm-405
下载
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
-
event.target始终是点击的那个最内层元素（比如 #target），全程不变 -
event.currentTarget是当前正在执行处理函数的那个元素（可能是 body、outer、inner 或 target） -
event.eventPhase返回数字：1=捕获，2=目标，3=冒泡，可在控制台直观验证阶段顺序
三、加入交互控制按钮，动态干预事件流
添加几个按钮，分别实现常见干预操作，让练习不止于观察，还能动手验证效果：
- 【阻止冒泡】按钮：在 #target 的冒泡监听器中调用
event.stopPropagation()，观察外层冒泡监听器是否不再执行 - 【只触发一次】按钮：在任意监听器中调用
event.stopImmediatePropagation()，验证同阶段其他监听器是否被跳过 - 【切换捕获开关】按钮：动态增删某个父元素的捕获监听器，体会 useCapture 控制的粒度
四、扩展：用事件委托替代重复绑定
把所有子元素的 click 逻辑收口到 #outer 上，利用冒泡 + event.target 判断来源，再结合 dataset 或 class 区分行为。
- HTML 中给每个可点元素加
data-action="delete"或data-action="edit" - 只在 #outer 上绑定一个冒泡 click 监听器，用
if (e.target.dataset.action === 'delete')分支处理 - 对比之前“每个元素单独绑定”的写法，体会性能与可维护性提升
