dispatchEvent 产生无序的调用捕获/冒泡监听器答案

【问题标题】：dispatchEvent produces calls capture/bubble listeners out of orderdispatchEvent 产生无序的调用捕获/冒泡监听器
【发布时间】：2014-07-31 19:03:25
【问题描述】：

当我使用dispatchEvent 模拟鼠标事件时，事件侦听器的调用顺序与真实鼠标事件不同。特别是，在同一目标上的 capture 侦听器之前调用了一些 bubble 侦听器。

这里有一个小提琴来说明我的意思：http://jsfiddle.net/soney/8stNc/2/

我在里面写道：

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 中对此进行了测试。所有三个浏览器都产生相同的行为，因此它可能不是错误。谁能解释为什么顺序不同以及如何使用模拟事件生成“真实”顺序？

【问题讨论】：

标签： javascript google-chrome firefox safari dom-events

【解决方案1】：

差异不是由模拟鼠标事件和真实鼠标事件之间的差异引起的；这是由不同的事件目标引起的。

我生成的“模拟”鼠标事件的事件目标是window。我生成的“真实”鼠标事件的目标比window 更具体，例如document.body。

当事件目标与调用 addEventListener 的对象相同时，侦听器按添加顺序调用，如下所述：Event listeners registered for capturing phase not triggered before bubbling - why?

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

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

【讨论】：