View Full Version : Capturing all DOM Events

02-20-2009, 08:08 PM
Hi, my company has a bunch of web pages on which they want to record every DOM event(mouse movement, clicks etc), these pages were written in past and now with minimal editing I need to add listener to capture these events.
Can someone provide an easy and effective way to do this (may be addition of eventlistener at Body tag to capture all bubbled up events, but i am not sure if it will work when stopPropagation method is called by some eventlistener in the chain).
I am looking for a universal listener kind of thing that can be easily integrated with my pages.
Thanks to every reader of this question

02-21-2009, 01:30 AM
I have done some work in this area, namely for a website statistics thing I was thinking about doing. I can't seem to find my code; however, I can give you some ideas.

First, you don't need to grab every single mouse move event (they tend to fire every 15ms-ish), so you can get away with every 6 or so.

Second, whatever you do, make sure you store which browser and platform they are using. If you do that, you shouldn't need to worry about the context of the event at all, as you can replay everything from the start to see exactly what event did what.

Third, think about a unique way to serialize any and all important about the event. Store the strings in an array, then just send the array over to the server when you're done. Important properties are the mouse coordinates, the mouse detail, the timeStamp, etc. Unimportant are target information.

Fourth, the stopPropagation() business isn't so tragic. You can rewrite the method to make note of that:

Event.prototype.stopPropagation = (function(stopPropagation) {
return function() {
myeventqueue.store(this, "STOPPED"); // or something

Fifth, I'm forgetting things, but good luck. Storing the events are only half the problem -- playing them back is the other half. Look into things like createEvent() and dispatchEvent(). Also, this will be considerably more difficult in IE, what with stopPropagation() being replaced with a property set.

Sixth, don't forget about keyboard events. Every browser is different.

02-22-2009, 08:37 AM
Thank so much JKD, this is exactly what i am trying to achieve. To keep my initial post succinct I didnt mention about the palyaback, but thats the other part of my project (which i havent thought of much yet).
I know when we cant find something we dont find it anyway but it would give me a jump start if I could get the code that you have worked upon.

Is there any book/site that you know, which might be helpful in this?
Thanks Again