66

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.

stackular
  • 1,431
  • 1
  • 19
  • 41
knoopx
  • 17,089
  • 7
  • 36
  • 41

2 Answers2

112

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.

Xavi
  • 20,111
  • 14
  • 72
  • 63
  • 2
    yes, http://api.jquery.com/ajaxSuccess/ just hooks jQuery's XHR wrapper, so no real JS event is captured. However this hack should do the trick :) – knoopx Aug 17 '10 at 11:28
  • 2
    "generally ill-advised" - why? – John Dvorak Dec 26 '13 at 18:24
  • 2
    Update: `monitorEvents` works perfectly fine in Chrome just as well. – John Dvorak Dec 26 '13 at 18:25
  • (it fires _tons_ of `mousemove` events, however) – John Dvorak Dec 26 '13 at 18:26
  • 2
    @JanDvorak It's generally ill-advised because it make the browser environment ever more unpredictable. For example, imagine if one day XMLHttpRequest constructors start allowing parameters? The implementation I provided above ignores all constructor parameter, which mean it could silently break some time in the future. And when it does, could lead to a number of confusing and frustrating bugs. This blog post mentions other reasons why it's a bad idea: http://www.nczonline.net/blog/2010/03/02/maintainable-javascript-dont-modify-objects-you-down-own/ – Xavi Jan 07 '14 at 16:18
  • Is there some way to show events which are fired before I'm able to enter a command into the console (automatically fired on page reload) in Chrome. Firefox seems to have a `persist` argument (not tried). – Günter Zöchbauer Dec 09 '15 at 08:56
  • It should be noted that `monitorEvents` does not respond to custom events, and only responds to the following standard events: mousedown, mouseup, click, dblclick, mousemove, mouseover, mouseout, mousewheel, key, keydown, keyup, keypress, textInput touchstart, touchmove, touchend, touchcancel, resize, scroll, zoom, focus, blur, select, change, submit, reset, load, unload, abort, error, select, change, submit, reset, focus, blur, resize, scroll, search, devicemotion, and deviceorientation. (via the monitorEvents source, http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents) – MaxPRafferty Feb 17 '16 at 21:09
  • `monitorEvents` is available in Safari 9 too – Paolo Dec 12 '16 at 17:32
21

To piggy back off Xavi's answer of monitorEvents(myDomElem), if you wanted everything but the mouse events, you could then enter unmonitorEvents(myDomElem, 'mouse').

http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents has a good article in regards to using chrome monitor events.

Mottie
  • 84,355
  • 30
  • 126
  • 241
Malenx
  • 381
  • 3
  • 4