通过给元素绑定事件监听器并触发特定事件，可以观察控制台输出顺序来模拟和验证事件传播的执行流程。核心做法是分别使用 addeventlistener 的第三个参数 usecapture 设置为 true（捕获阶段）和 false（冒泡阶段），然后调用 dispatchevent 或点击操作，根据日志打印的顺序判断当前处于哪个阶段。
如何区分捕获与冒泡阶段的执行时机
在 DOM 事件流中，事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。要测试执行顺序，关键在于理解 useCapture 参数的作用。当设置为 true 时，监听器会在捕获阶段（从根节点向目标节点传播）被触发；当设置为 false 时，监听器会在冒泡阶段（从目标节点向根节点传播）被触发。通过在同一元素上同时注册两种模式的监听器，可以清晰地看到先执行捕获，再执行目标，最后执行冒泡的顺序。
const parent = document.getElementById('parent');
const child = document.getElementById('child');
// 捕获阶段监听器
parent.addEventListener('click', function() {
console.log('Parent Capture');
}, true);
// 冒泡阶段监听器
parent.addEventListener('click', function() {
console.log('Parent Bubble');
}, false);
// 目标阶段监听器（默认false，但在目标元素上捕获和冒泡都会触发）
child.addEventListener('click', function() {
console.log('Child Target');
}, false);
// 触发事件
child.click();
// 预期输出顺序：
// 1. Parent Capture
// 2. Child Target
// 3. Parent Bubble如何验证嵌套元素的事件传播路径
当事件发生在嵌套的 DOM 结构中时，传播路径会经过所有祖先元素。为了验证这一点，需要构建一个多层级的 HTML 结构，并在每一层都注册捕获和冒泡监听器。通过观察日志输出的层级变化，可以确认事件是从最外层容器向内传播（捕获），到达目标后，再从目标向外传播（冒泡）。这种测试方法能有效排查因事件委托或意外触发导致的逻辑错误。
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
立即学习“Java免费学习笔记（深入）”；
const grandParent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');
function addListeners(el, name) {
el.addEventListener('click', () => console.log(name + ' Capture'), true);
el.addEventListener('click', () => console.log(name + ' Bubble'), false);
}
addListeners(grandParent, 'GrandParent');
addListeners(parent, 'Parent');
addListeners(child, 'Child');
// 触发子元素点击
child.click();
// 预期输出顺序：
// 1. GrandParent Capture
// 2. Parent Capture
// 3. Child Capture (目标阶段)
// 4. Child Bubble (目标阶段)
// 5. Parent Bubble
// 6. GrandParent Bubble当 stopPropagation 被调用时传播顺序如何改变
如果在事件传播过程中调用了 event.stopPropagation()，后续阶段的监听器将不再执行。这可以用来测试中断传播的效果。例如，在父元素的捕获阶段调用 stopPropagation，则目标元素及其后的冒泡阶段监听器都不会被触发。这种行为对于实现某些需要阻止默认行为或防止事件扩散的功能至关重要。
