JavaScript event bubbling and event capturing made easy

JavaScript event bubbling and event capturing is an important and interesting features of it. Lets see what it is and how it works. Event Bubbling generally works by bottom to top approach that means if you have nested HTML element say for example div, both the parent and child elements have onclick events. So now the question is which onclick event triggers first when you click on the HTML elements ? obviously the  child first triggers because this method is called “Event Bubbling”. Mostly all the browsers will have event bubbling default. The events triggers by bottom to top approach.

Now Event capturing it is also again one of the interesting features of javascript. This can be used to change the traverse of the event to occur first. This is generally top to bottom approach and taking the same example with two nested elements say for example div, both the parent child element have onclick events. So when the user needs the parent div element to trigger first user can use “Event capturing” .  These functionality can be achieved by using built in javascript functions.

Javascript code :-

/* Except IE */

/* For IE */

similarly we can also stop event capturing by using event.stopPropogation() an in built method in javascript.  And  I’ll try to post on event stop propogation shortly…