Tutorial :Catch all DOM events on a page (without Firebug et. al.)


How would I go about creating a cross-browser script, that would intercept all events firing on
a page/browser window/DOM-tree (regardless of browser)?

What I'm hoping to accomplish is basically to get a better understanding of the different handling of events in different browsers; I know the basic theory, but need to see to believe...

I'm pretty well versed in both using frameworks, and working with "pure" Javascript.

What I want is sort of :
document.addEventListener('*', function(e){
alert(e.type + ' is happening on ' + e.target), false);


The only thing that you can do to play around with is find out all events that exist and create a list of controls each with a different event and then label them accordingly and some alert boxes.

Then you can start firing the events and see how they are executing based on the alert boxes.

In future coding you could also use a JavaScript library that basically changes almost every existing JS code and functions so they they are all cross-browser.

Examples are(order of preference):



Not required but make life much simpler when it comes to cross-browser and creating fancy controls.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »