Monitor all JavaScript events in the browser console
JavascriptEventsJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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.