在 javascript 的事件循环中，微任务（如 promise.then）是在当前宏任务（如点击事件、定时器回调）执行完毕后、浏览器进行 ui 渲染前执行的。由于 dom 事件冒泡发生在同一个宏任务的同步代码执行阶段，因此所有冒泡阶段的逻辑都会在微任务队列被清空之前完成。要实现“在事件冒泡后”执行微任务，只需在事件处理函数中通过 promise.resolve().then() 或 queuemicrotask() 将逻辑推入微任务队列即可。
如何确保逻辑在冒泡结束后执行
直接回答：在事件处理函数内部使用 Promise.resolve().then() 包裹后续逻辑。因为事件冒泡是同步发生的，而 then 中的回调是异步的微任务，所以它必然在所有父元素的冒泡处理完成后才执行。
const child = document.getElementById('child');
child.addEventListener('click', function(event) {
console.log('Child Clicked'); // 同步执行
// 将逻辑放入微任务队列
Promise.resolve().then(() => {
console.log('After Bubble Complete'); // 在所有冒泡结束后执行
console.log('Event Phase:', event.eventPhase); // 此时通常为 BUBBLING_PHASE 结束后的下一轮
});
});
// 预期输出顺序：
// Child Clicked
// (Parent Clicked, Grandparent Clicked...)
// After Bubble Complete为什么不能直接在冒泡过程中拦截并推迟？
直接回答：如果在冒泡过程中试图通过 setTimeout 来推迟执行，那属于宏任务，会晚于下一次 UI 渲染，而不是紧随其后。微任务是唯一能在当前调用栈清空后立即执行且早于渲染的机制。因此，必须依赖微任务队列的特性，而不是改变事件流本身。
立即学习“Java免费学习笔记（深入）”；
// 对比：使用 setTimeout 会导致延迟到下一个宏任务
child.addEventListener('click', function() {
setTimeout(() => {
console.log('Too Late: Next Macrotask');
}, 0);
});
// 正确：使用 queueMicrotask
child.addEventListener('click', function() {
queueMicrotask(() => {
console.log('Correct: Microtask after bubble');
});
});eventPhase 在微任务中是否还能反映冒泡状态？
直接回答：在微任务中，event.eventPhase 仍然保持为 BUBBLING_PHASE（值为 2），因为事件对象是在同步阶段创建的。但是，此时所有的冒泡监听器都已经执行完毕。你可以通过检查 event.target 和 event.currentTarget 的关系，或者简单地依靠时序保证，来确定冒泡流程已结束。
