Event Bubbling in JavaScript Last Updated : 28 Jan, 2025 Comments Improve Suggest changes Like Article Like Report Event bubbling in JavaScript is a mechanism where an event triggered on a child element propagates upward through its ancestors in the DOM. It allows parent elements to respond to events triggered by their child elements.Propagation Direction: In event bubbling, the event starts at the target element and propagates upward through its parent elements to the root of the DOM.Default Behavior: Event bubbling is enabled by default in JavaScript.Event Listeners: If multiple event listeners are attached in the bubbling phase, they are executed in sequence, starting from the innermost target element.How Event Bubbling Works?Event Bubbling in JavaScriptEvent Triggering: The click event is triggered on the child element (button), initiating the event propagation.Event Capturing: In the capturing phase, the event propagates from the root of the DOM down to the target (child). However, no listeners are explicitly set to handle events in this phase in the given code.Event Bubbling: After reaching the target element (child), the event enters the bubbling phase, propagating back up through the DOM tree to the parent (parent).Listener Behavior: Event listeners are attached to both parent and child elements using addEventListener. By default, these listeners respond during the bubbling phase unless the capture option is set to true.Execution Order: When the button is clicked, the child listener executes first (console.log("Child")), followed by the parent listener (console.log("Parent")) as the event bubbles up.Let's see this with an exmple HTML <!--Driver Code Starts--> <html> <head> <style> *{ margin: 25px; box-sizing: border-box; } .grandparent{ height: 350px; width: 350px; border: 2px solid red; } .parent{ height: 250px; width: 250px; border: 2px solid blue; } .child{ height: 150px; width: 150px; border: 2px solid green; } </style> </head> <body> <div class="grandparent" id="one"> Grandparent <div class="parent" id="two"> Parent <div class="child" id="three"> Child </div> </div> </div> <!--Driver Code Ends--> <script> let grandparent=document.getElementById('one') let parent=document.getElementById('two') let child=document.getElementById('three') grandparent.addEventListener('click',function(e){ console.log("Grandparent Clicked") }) parent.addEventListener('click',function(e){ console.log("Parent Clicked") }) child.addEventListener('click',function(e){ console.log("Child Clicked") }) </script> <!--Driver Code Starts--> </body> </html> <!--Driver Code Ends--> Event Bubbling: Clicking the child triggers the event to propagate upward, activating listeners on the parent and grandparent.Console Output: The order is "Child Clicked", "Parent Clicked", "Grandparent Clicked", showing the bubbling flow.Event Object: Each listener receives the event object e, which includes details like e.target and methods like e.stopPropagation().CSS Structure: Visual borders and sizes make the DOM hierarchy and event propagation clear.How to Stop Event Bubbling?To stop event bubbling, you can use the event e.stopPropagation() method in the event handler. This prevents the event from propagating to parent elements, so only the target element's event listener is triggered. HTML <!--Driver Code Starts--> <html> <head> <style> *{ margin: 25px; box-sizing: border-box; } .grandparent{ height: 350px; width: 350px; border: 2px solid red; } .parent{ height: 250px; width: 250px; border: 2px solid blue; } .child{ height: 150px; width: 150px; border: 2px solid green; } </style> </head> <body> <div class="grandparent" id="one"> Grandparent <div class="parent" id="two"> Parent <div class="child" id="three"> Child </div> </div> </div> <!--Driver Code Ends--> <script> let grandparent=document.getElementById('one') let parent=document.getElementById('two') let child=document.getElementById('three') grandparent.addEventListener('click',function(e){ e.stopPropagation() console.log("Grandparent Clicked") }) parent.addEventListener('click',function(e){ e.stopPropagation() console.log("Parent Clicked") }) child.addEventListener('click',function(e){ e.stopPropagation() console.log("Child Clicked") }) </script> <!--Driver Code Starts--> </body> </html> <!--Driver Code Ends--> Event Bubbling Stopped: e.stopPropagation() prevents the event from bubbling to parent elements.Independent Logs: Only the clicked element logs its message (e.g., "Child Clicked"), as bubbling is stopped.Nested Visualization: CSS borders clearly show the DOM hierarchy and event flow.Unique IDs: Each element has a unique ID for easy event listener management.Practical Use: Useful for isolating behaviors, like preventing dropdowns or modals from closing when interacting with inner elements.Use Cases of Event BubblingDelegated Event Handling: Instead of adding event listeners to multiple child elements, attach one to their parent and handle the events as they bubble up. JavaScript document.getElementById('parent').addEventListener('click', (event) => { console.log('Clicked:', event.target.id); }); Simplified Code: Reduces redundancy and improves performance when handling events for dynamic or large DOM structures.Advantages of Event BubblingReduces the need for multiple event listeners.Enables delegated event handling for dynamic elements.Simplifies event management for complex structures.Event Bubbling vs Event CapturingEvent BubblingEvent CapturingThe event starts at the target element and propagates upward to the root of the DOM.The event starts at the root of the DOM and propagates downward to the target element.Event listeners are attached to handle events during the bubbling phase by default.To handle events in the capturing phase, you must explicitly set the capture option to true in addEventListener.Often used when you want parent elements to respond to events triggered on child elements (e.g., event delegation).Useful when you want parent elements to handle the event before it reaches the target element.Inner (child) elements execute their event listeners first, followed by outer (parent) elements as the event propagates upward.Outer (parent) elements execute their event listeners first, followed by inner (child) elements as the event propagates downward.Supported by all modern browsers and has been the default behavior for a long time.Supported, but less commonly used as it requires the explicit capture option to be enabled. Comment More infoAdvertise with us Next Article Event Bubbling in JavaScript K kg_code Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions JavaScript-Events Similar Reads What is Event Bubbling and Capturing in JavaScript ? Events are a fundamental construct of the modern web. They are a special set of objects that allow for signaling that something has occurred within a website. By defining Event listeners, developers can run specific code as the events happen. This allows for implementing complex control logic on a w 5 min read Event Queue in JavaScript JavaScript, being single-threaded, processes tasks sequentially, meaning it executes one task at a time. This can pose a challenge when dealing with operations that take time to complete, such as fetching data from a server or performing complex calculations. To handle such scenarios efficiently, Ja 5 min read JavaScript Events JavaScript Events are actions or occurrences that happen in the browser. They can be triggered by various user interactions or by the browser itself. HTML<html> <script> function myFun() { document.getElementById( "gfg").innerHTML = "GeeksforGeeks"; } </script> <body> <but 3 min read JavaScript Custom Events Events are used in almost every web application, such as the onclick event is used to execute some code when the user clicks on something. There are already numerous built-in events available to be used, but what if we want our custom event? Let us suppose we are creating a chat application, and we 3 min read Timing Events in Javascript Timing events are the events that help to execute a piece of code at a specific time interval. These events are directly available in the HTML DOM (Document Object Model) Window object, i.e., they are present in the browser. So, these are called global methods and can be invoked through the 'window' 5 min read Like