What Is The Difference Between Event Bubbling and Event Capture?

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?

Event Capture:
The event handler of outer-div fires first, then event handler of inner-div fires last.

Event Bubbling:
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 model

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.cancelBubble=true  // IE
    • event.stopPropagation()  //for other browsers.

Posted on: September 26th, 2013 by Stephani

Leave a Reply