This post is basically a bunch of tests on the information provided on chapter 9 of the book Professional Javascript for Web Developers.

I’ve been working with some javascript events behaviour and I needed to explore the Event Bubbling model in a variety of browsers. I created a simple test page for testing how js events bubble. I added a simple on click event to the different elements on a page and associated it with a function that simply alerts the name of the element. This is very usefull to see how events propagate. Go test them and see for yourself.

Results on Windows XP

 IE 6.0.2900 Firefox 1.5.07 Opera 9.0.1
Clicking outside the Body Document Document - Window Window - Document
Clicking Inside the Body Body - Document Body - Document - Window Body - Window - Document
Clicking Inside the Element Element - Body - Document Element - Body - Document - Window Element - Body - Window - Document

Now this works pretty fine and is very straightforward. But if you want to prevent an event fired by an element to bubble all the way up the bubble chain, the code is the following:


function al_p(e) { alert('Element'); if((navigator.userAgent.indexOf("MSIE")>-1 && navigator.userAgent.indexOf("compatible")>1 && !(navigator.userAgent.indexOf("opera")>-1))) { //IE
if(!e) e = window.event; e.cancelBubble = true;
} else {
//Other Browsers
e.stopPropagation(); } };

You can test the results here: Javascript Event Bubbling Prevention Test