Search code examples
javascriptperformancemouseeventdom-eventsopera

HTML element on active event

I want to measure the time between mousedown event and applying CSS active property without using any jQuery functions (pure Javascript). I found that there is onactive event but it is not supported by Opera (the browser on which I want to make this measurement). Actually this onactive event is supported only by IE (not sure which versions).

htmlElement.addEventListener('mousedown', function(){var timestamp = new Date().getTime() / 1000; console.warn('mouse down ', timestamp)})

htmlElement.addEventListener('DOMAttrModified', function(){var timestamp = new Date().getTime() / 1000; console.info('highlighted ', timestamp)})

This 'DOMAttrModified' event doesn't report when a button becomes active.

Solution

  • :active is a CSS pseudo-class, not a DOM attribute or property. It isn't possible or feasible to measure the time between mouse down and the time the :active pseudo-class is set because of the single-threaded nature of GUI and code execution. Basically, by the time the mouse event fires, CSS and GUI updates are already queued and no event fires for when :active is applied.

    Still, I can't think of any valid reason for worrying about how long this process takes, you're probably better off forgetting about it and moving on.