Question

有关已触发事件的信息是否放在一个事件对象中，每个事件都会覆盖前一个事件的任何属性？或者是为每个事件创建的新对象？

根据W3C DOM4，“整个Web平台事件被分派到对象以发出信号......”和“事件也是对象并实现事件接口”。

MDN声明：“每个事件都由一个基于事件接口的对象表示，并且可能有其他自定义字段和/或函数用于获取有关所发生事件的其他信息。”

本文档“http://web.stanford.edu/class/cs98si/slides/the-document-object-model.html”声明“每当事件触发时，都会创建一个对象来表示事件。”

这似乎表明基于Event接口的New Objects一直在创建......

其他消息来源似乎暗示了一些不同的东西。例如：

“在正常的程序执行期间，会发生大量事件，因此事件对象是一个相当活跃的对象，不断更改其属性。

每当事件触发时，计算机都会将有关事件的相应数据放入事件对象中 - 例如，事件发生时鼠标指针位于屏幕上，在此时按下鼠标按钮事件和其他有用的信息。“

Answer 1

为事件的每个出现创建一个新的事件对象。换句话说，每次物理鼠标点击都会将全新的事件对象发送到click处理程序 s 。

这里要认识到的重要一点是，由于event bubbling以及多个侦听器可能附加到单个元素的事实，可以将该一个对象传递给多个函数调用。 Consider:

el.addEventListener('click', function(e) {
   e.foo = 'bar'; 
});


el.addEventListener('click', function(e) {
   alert(e.foo);
});

由于相同的事件对象被传递到每个处理函数，第二个将警告bar。

Answer 2

这是一个探索你的问题的jsFiddle：http://jsfiddle.net/javajunkie314/zpmqndLa/1/

至少在Chrome 40中，当事件处理程序冒泡时，更改仍然存在，但是当下一个事件触发时，更改将会丢失。

HTML：

<div id="foo">
    <div id="bar">Hello</div>
</div>

<div id="baz">World</div>

JavaScript：

(function () {
    var foo = document.getElementById('foo');
    var bar = document.getElementById('bar');
    var baz = document.getElementById('baz');

    foo.addEventListener('click', function (event) {
        alert('Foo says: ' + event.testProp);
    });

    bar.addEventListener('click', function (event) {
        event.testProp = 'Hello world!';
        alert('Bar says: ' + event.testProp);
    });

    baz.addEventListener('click', function (event) {
        alert('Baz says: ' + event.testProp);
    });
})();

是否为响应DOM事件而创建了多个事件对象？

2 个答案: