Question

当我使用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中对此进行了测试。所有三种浏览器都会产生相同的行为，因此它可能不是一个错误。任何人都可以解释为什么订单不同以及如何生产＆＃34;真正的＆＃34;订购模拟活动？

Answer 1

差异不是由模拟和差异造成的差异造成的。真正的鼠标事件;这是由不同的事件目标引起的。

我制作的“模拟”鼠标事件的事件目标为window。我制作的“真实”鼠标事件的目标比window更具体，如document.body。

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

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

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

dispatchEvent不按顺序生成调用捕获/冒泡侦听器

1 个答案: