How to emulate Event.timeStamp

2.1k views Asked by At

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 ?
2

There are 2 answers

0
jordancpaul On BEST ANSWER

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.

3
sethobrien On

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.