0

Is information about fired events placed into a single Event Object, with each event overwriting any properties of the preceding event? Or are new objects created for each event?

According to W3C DOM4, "Throughout the web platform events are dispatched to objects to signal an occurrence..." and "Events are objects too and implement the Event interface".

The MDN states: "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."

This document "http://web.stanford.edu/class/cs98si/slides/the-document-object-model.html" states "Whenever an event fires, an object is created to represent the event."

This seems to indicate that New Objects based on the Event interface are being created all the time...

Other sources seems to suggest something different. Such as this for example:

"During normal program execution, a large number of events occur, so the event object is a fairly active object, constantly changing its properties.

Whenever an event fires, the computer places appropriate data about the event into the event object - for example, where the mouse pointer was on the screen at the time of the event, which mouse buttons were being pressed at the time of the event, and other useful information."

tomasP
  • 23
  • 2
  • Single sentence questions will usually be closed. You need to put more effort into your question. – JK. Jan 22 '15 at 22:50
  • Thank you. I was trying to be concise. I shall edit the question – tomasP Jan 22 '15 at 23:01
  • Actually I think it's a perfectly reasonable question as it stands, I just don't know where to find the official answer. FWIW, on current Chrome, you definitely get a new event object each time. – Alnitak Jan 22 '15 at 23:15
  • 1
    the latter probably relates to the very old event model where you had to look in the global `window.event` object instead of an event parameter, hence why you sometimes see `var event = event || window.event` at the top of some event handlers. – Alnitak Jan 22 '15 at 23:18
  • I expect this is an implementation detail, but it should be easy enough to test. Bind the same event to an element and its parent, modify the event object in the child handler and see if the modification persists when the event bubbles up. – Chris Bouchard Jan 22 '15 at 23:22
  • @Alnitak Yes, I believe you may be correct. Thanks – tomasP Jan 23 '15 at 08:36

2 Answers2

3

A new event object is created for each occurrence of an event. In other words, every physical mouse click will dispatch a brand new event object to the click handlers.

The important thing to recognize here is that due to 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);
});

Since the same event object is passed in to each handler function, the second one will alert bar.

Community
  • 1
  • 1
josh3736
  • 139,160
  • 33
  • 216
  • 263
  • Thanks for the answer. I've received two equally correct and helpful answers. But I'll accept the other one because it came in first and the author currently has less rep. Thanks again. (I would up vote but I'm lacking the rep...) – tomasP Jan 23 '15 at 08:41
2

Here's a jsFiddle exploring your question: http://jsfiddle.net/javajunkie314/zpmqndLa/1/

In Chrome 40 at least, the change persists between event handlers while it bubbles, but the change is lost when the next event fires.

The HTML:

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

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

The 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);
    });
})();
Chris Bouchard
  • 806
  • 7
  • 12