是为响应 DOM 事件而创建的多个事件对象

Are multiple event objects created in response to DOM events?

本文关键字：事件 对象 创建 响应 DOM      更新时间：2023-09-26
有关

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

根据W3C DOM4，"在整个Web平台中，事件被调度到对象以发出发生信号......"和"事件也是对象，实现事件接口"。

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

此文档"http://web.stanford.edu/class/cs98si/slides/the-document-object-model.html"指出"每当触发事件时，都会创建一个对象来表示该事件。

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

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

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

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

每次出现事件都会创建一个新的事件对象。 换句话说，每次物理鼠标单击都会将一个全新的事件对象调度给click处理程序。

这里要认识到的重要一点是，由于事件冒泡以及多个侦听器可能附加到单个元素的事实，一个对象可能会被传递给多个函数调用。 考虑：

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

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

由于相同的事件对象被传递给每个处理程序函数，因此第二个对象将提醒bar。

这是一个 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);
    });
})();
相关文章：