调用window.dispatchEvent触发事件时冒泡早于捕获，如何获取正确执行顺序？

问题根因 #

你遇到的现象完全符合W3C DOM事件流规范，不是Bug：

• 当事件处于**目标阶段（eventPhase=2）**时，事件监听器的执行顺序仅和绑定顺序有关，和useCapture参数无关。
• 你的代码中先给window绑定了冒泡监听器，后绑定了捕获监听器，当你直接给window派发事件时，window就是事件的最终目标，没有上层节点可以走捕获/冒泡流程，所以只会触发目标阶段的监听器，按绑定顺序先执行冒泡、后执行捕获。
• 真实鼠标点击时，事件的目标是你点击的页面元素，window属于祖先节点，因此window的捕获监听器会在捕获阶段（eventPhase=1）执行，冒泡监听器会在冒泡阶段（eventPhase=3）执行，自然是捕获早于冒泡，和绑定顺序无关。

解决方法 #

方案1：向实际目标元素派发事件（推荐，和原生行为完全一致） #

如果你要模拟用户交互的事件流，不要直接向window派发事件，而是向实际的交互目标（比如示例里的#block元素）派发事件，且创建事件时指定bubbles: true（原生点击事件默认支持冒泡，new Event默认该参数为false），事件会自动走完「捕获→目标→冒泡」的完整流程，window上的监听器自然会按先捕获后冒泡的顺序触发。
修改后的派发代码示例：

// 第二个参数配置开启冒泡，和原生click行为一致
targets[1].dispatchEvent(new Event('click', { bubbles: true }))

方案2：调整window监听器的绑定顺序 #

如果你确实有需要直接向window派发事件，只需要调整监听器的绑定顺序，先绑定捕获类型的监听器，再绑定冒泡类型的监听器即可：

for (const target of targets) {
    // 先绑捕获
    target.addEventListener('click', function(e) {
        console.log(`\tcapture: ${target.id}, evnetPhase: ${e.eventPhase}`)
    }, true)
    // 后绑冒泡
    target.addEventListener('click', function(e) {
        console.log(`\tbubble: ${target.id}, evnetPhase: ${e.eventPhase}`)
    })
}

该方案下直接给window派发事件，也会先执行捕获逻辑，再执行冒泡逻辑。

内容的提问来源于stack exchange，提问作者user16833022