Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Capturing all DOM Events

    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

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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:
    Code:
    Event.prototype.stopPropagation = (function(stopPropagation) {
        return function() {
            stopPropagation.call(this);
            myeventqueue.store(this, "STOPPED"); // or something
        }
    })(Event.prototype.stopPropagation);
    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.

  • Users who have thanked jkd for this post:

    bsnl (02-22-2009)

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •