How to emulate Event.timeStamp

Question

Event.timeStamp

The timeStamp attribute must return the value it was initialized to. When an event is created the attribute must be initialized to the number of milliseconds that has passed since 00:00:00 UTC on 1 January 1970.

One could trap both new Event and document.createEvent to set the timeStamp accordingly but how do you intercept events created and dispatched by the browser?

One could add an event listener (capture phase) to the document that listens on "every" event type and write the timeStamp as close to the dispatch time but that would be an ugly hack.

• Are there any better ways to emulate Event.timeStamp ?
• Are there any potential traps with intercepting new Event / new CustomEvent and document.createEvent.
• Are there other ways to create events programmaticly ?
• Are there any potential issues with adding event listeners to document and manually setting timeStamp as early as possible ?

Twomey

What is exactly the question? – Vacla

Out of curiosity, what are the benefits of emulating Event.timeStamp? – Peacemaker

@Adel being able to figure out when an event occured. – Twomey

I am no expert, but I wonder if the following would work. 1. Override the "Event.prototype.initEvent" with your own function. 2. In that new function add the time-stamp; and call the original initEvent function? This MDN-reference seem to indicate that all Events created with document.createEvent internally calls the Event.initEvent, so it might work for you?! – Elegiac

I too would like more clarity as to why you want to do this - I understand you want to know when the event occurred - but to what end? Can you give a use-case for this kind of functionality? – Missi

I don't understand your final goal. Events already have the timeStamp property jsfiddle.net/pomeh/hGHwE so why do you need to "simulate" it ? – Cavitation

@Cavitation modern browsers have it, some browsers have bugs with their implementation, some browsers just don't have it – Twomey

There's a value for testing your code. If you run unit-tests you need to be able to spoof the timeStamp value if you're building something like a gesture library or any other time-sensitive event handling code. – Falciform

Answer 1

Another option is to add the timestamp in the handler. Presumably, only code you write actually cares about the timestamp, and since you are in control of code you write, you can use your own "listen" helper function. Something like:

var myAddListener = function(name, fn, scope){
    addEventListener(name, function(e){
        if(!e.timeStamp) e.timeStamp = +new Date;
        fn.apply(scope || null, arguments);
    });
}

As long as your timestamp-dependant code is attached with this, you're fine. Note, I added a 'scope' argument while I was at it...it's a handy way of preserving 'this' when using listeners within class instances.

Autogenesis

Answer 2

I couldn't find any place to intercept the creation of events that were generated by the browser rather than by user code. Your "ugly hack" seems to work okay though:

addEventListener("click", function (e) {
    Object.defineProperty(e, "timeStamp", {
        get: function () { return 4; }
    });
}, true);

Obviously you'd have to call addEventListener a bunch of times with whatever event names you're interested in. Note that setting the timeStamp directly has no effect, but defineProperty works. I only tested Chrome and IE9; I'm sure interop would be a mess since we're using a getter method.

Makeshift

How can you ensure this event listener gets executer before all the other ones listening for "click"? – Caliban

@Caliban It's capture-phase on the global window object, so the only things that could get executed before it are other capture-phase event listeners that were already defined on window, which are pretty rare. – Makeshift

what do you think about adding a check against the timeStamp property ? – Cavitation