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 Try it Yourself


Click anywhere inside Div


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.
 (C) 2022    Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.
SiteMap  | Terms  | About