Open In App

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-and-capturing
Event Bubbling in JavaScript
  • Event 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 Bubbling

  • Delegated 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 Bubbling

  • Reduces the need for multiple event listeners.
  • Enables delegated event handling for dynamic elements.
  • Simplifies event management for complex structures.

Event Bubbling vs Event Capturing

Event Bubbling

Event Capturing

The 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.


Next Article
Event Bubbling in JavaScript

K
kg_code
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox