Possible to capture all events in a web browser?

Question

I am working on a pet project and am at the research stage.

Quick summary

I am trying to intercept all form submits, onclick, and every single keydown. My library of choice is either jquery, or jquery + prototypejs. I figure I can batch up the events into a queue/stack and send it back to the server in time interval batches to keep performance relatively stable.

Concerns

Form submits and change's would be relatively simple.. Something like

$("form :inputs").bind("change", function() { ... record event... }); 

But how to ensure I get precedence over the applications handlers as I have a habit of putting return false on a lot of my form handlers when there is a validation issue. As I understand it, that effectively stops the event in its tracks.

My project

For my smaller remote clients I will put their products onto a VPS or run it in my home data center. Currently I use a basic authentication system, given a username/password they see the website and then hopefully send me somewhat sane notes on what is broken or should be tweaked.

As a better solution, I've written a simple proxy web server that does the above but allows me to have one DNS entry and then depending on credentials it makes an internal request relaying headers and re-writing URLS as needed. Every single html/text or application/* request is compressed and shoved into a sqlite table so I can partially replay what they've done. Now I am shifting to the frontend and would like to capture clicks, keydown's, and submits on everything on the page.

Answer 1

To get past the return false; issue, try working with custom events.

// Bind custom event to all forms

    $('form').bind('custom_submit_event',function() {
        alert('custom submit event');
    });

// Bind submit event to all forms that triggers the custom event

    $('form').submit(function() {
        $(this).trigger('custom_submit_event');
    });

// Your regular submit event for a specific form

    $('#myform').submit(function() {
        // Run validation/submission code
        return false;
    });

I haven't used custom events very often, but this works for me. Don't know why it wouldn't work with other events as well.

You could also assign handlers to the document. As long as you don't hit the return false; issue, they events will bubble up to the document. Might be better (more efficient) than having the overhead of many event handlers throughout the page.

    $(document).click(function() {
        alert('click')
    })
    .keydown(function() {
        alert('keydown')
    });