Javascript dispatchEvent生成调用捕获/冒泡侦听器顺序错误

当我使用

dispatchEvent

模拟鼠标事件时，调用事件侦听器的顺序与实际鼠标事件的顺序不同。特别是，在捕获同一目标上的侦听器之前，会调用一些气泡侦听器

这里有一把小提琴来说明我的意思：

我在信中写道：

function logFN(message) {
    return function() {
        console.log(message);
    };
}

var event_type = "click";

addEventListener(event_type, logFN("Capture 1"), true);
addEventListener(event_type, logFN("Bubble  1"), false);
addEventListener(event_type, logFN("Capture 2"), true);
addEventListener(event_type, logFN("Bubble  2"), false);

var ev = document.createEvent("MouseEvent");
ev.initMouseEvent(event_type, true, true, window, 
          0, 0, 0, 0, 0, false, false, false, false, 0, null);
dispatchEvent(ev);

对于模拟的鼠标事件（如上面代码中生成的），顺序如下：

Capture 1
Bubble  1
Capture 2
Bubble  2

对于实际的鼠标事件，顺序是我所期望的：

Capture 1
Capture 2
Bubble  1
Bubble  2

---

我已经在最新版本的Chrome、Firefox和Safari中对此进行了测试。这三种浏览器都会产生相同的行为，所以这可能不是一个bug。有人能解释为什么顺序不同，以及如何使用模拟事件生成“真实”顺序吗？

这种差异不是由模拟和真实鼠标事件之间的差异造成的；这是由不同的事件目标造成的

我正在生成的“模拟”鼠标事件的事件目标为

window

。我正在生成的“真实”鼠标事件具有比

窗口

更具体的目标，如

document.body

当事件目标与调用了

addEventListener

的对象相同时，将按照添加侦听器的顺序调用侦听器，如下所述：

对于模拟事件，事件目标与调用它们的侦听器的对象相同，因此捕获/气泡的区别对于JavaScript的事件模型并不重要

对于真实事件，事件目标是而不是调用侦听器的对象，因此捕获/气泡的区别很重要