Monitor all JavaScript events in the browser console

events, javascript

Solution

With firebug or web inspector you can use `monitorEvents`:

monitorEvents(myDomElem);

This prints all events emitted by `myDomElem` to the console. Use `unmonitorEvents` to stop monitoring events.

If you're interested in getting events after the DOM has been manipulated, take a look at Mutation Events.

Edit:

As far as I know, there is no easy way to intercept all `onreadystatechange` events from all XMLHttpRequest. The only work-around I can think of is to override the native XMLHttpRequest object with you own implementation. For example:

(function() { // Overriding XMLHttpRequest
    var oldXHR = window.XMLHttpRequest;

    function newXHR() {
        var realXHR = new oldXHR();

        realXHR.addEventListener("readystatechange", function() { 
            console.log("an ajax request was made") 
        }, false);

        return realXHR;
    }

    window.XMLHttpRequest = newXHR;
})();

Needless to say this is extremely hacky and generally ill-advised.

Problem

Is it possible to listen to all javascript events? I'm trying to guess if there's an event triggered after the DOM is modified by an AJAX request.

Original source