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

Question

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

根据 W3C DOM4，"Throughout the web platform events are dispatched to objects to signal an occurrence..." 和 "Events are objects too and implement the Event interface"。

MDN 声明："Each event is represented by an object which is based on the Event interface, and may have additional custom fields and/or functions used to get additional information about what happened."

这份文件“http://web.stanford.edu/class/cs98si/slides/the-document-object-model.html”指出"Whenever an event fires, an object is created to represent the event."

这似乎表明一直在创建基于 Event 接口的新对象...

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

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

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

Answer 1

这是一个 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);
    });
})();

Answer 2

为事件的每个发生创建一个新的事件对象。换句话说，每次物理鼠标点击都会将一个全新的事件对象分派给 click 处理程序s.

这里要认识到的重要一点是，由于 event bubbling and the fact that multiple listeners may be attached to a single element, that one object may be passed in to multiple function invocations. Consider:

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


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

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

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

Are multiple event objects created in response to DOM events?

javascript

dom