Event Bubbling Vs. Event Capturing

Event is an action from user or program detected by the program. They are responsible for interaction of JavaScript with HTML web pages. Events can be subscribed by listeners that occurs only when the particular event can be fired. When an event occurs in an element inside another element, and both elements have registered a handle for that event. If there are three elements FORM, DIV and PARAGRAPH. DIV element placed inside the FORM element. PARAGRAPH is inside DIV and we attach an event handler with both the elements lets say onClick . Now when we click on PARAGRAPH then eventHandler for all three elements will be executed. Now here the question is in which order the event will execute. If the event attached with PARAGRAPH executes first this is called Event Bubbling and if the event attached with FORM executes first it is called Event Capturing. As per W3C the event will start in the capturing phase until it reaches the target comes back to the element and then it starts bubbling .

Event Bubbling

With bubbling , the event is first captured and handled by the innermost element and then propagated to outer elements. Only certain events can bubble. Events that do bubble have this property set to true. You can use this property to check if an event is allowed to bubble or not. At present, all the modern browsers have event bubbling as the default way of event flow.
run this source code Browser View


Click anywhere inside Div

<form onclick="alert('Event from form')" style="border: 2px solid blue;width:200px ; ">FORM <div onclick="alert('Event from div')" style="border: 2px solid green;width:150px ; ">DIV <p onclick="alert('Event from p')" style="border: 2px solid red; width:100px; ">P</p> </div> </form>

Event Capturing

Event Capturing is the event starts from top element to target element. Modern browser doesn't support event capturing by default but we can achieve that by code in JavaScript.