Let’s start with an example:
<div id="outer-div" onclick="functionOuter();"> <div id="inner-div" onclick="functionInner();"></div> </div>
If you click on the inner-div, it will cause a click event on both divs (inner-div and outer-div), but which event fires first?
The event handler of outer-div fires first, then event handler of inner-div fires last.
The event handler of the inner-div fires first, the event handler of outer-div fires last.
These two models will vary from browser to browser. (Of course)
W3C has very sensibly decided to take a middle position in this struggle.
Any event taking place in the W3C event model is first captured until it reaches the target element and then bubbles up again.
You can play with my jsFiddle to see event bubbling/capture in action
How to Stop Bubbling and Capturing:
- Bubbling/capturing can be stopped by:
event.stopPropagation()//for other browsers.