RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/javascript/event-bubbling-in-javascript/ below:

Event Bubbling in JavaScript - GeeksforGeeks

Event Bubbling in JavaScript

Last Updated : 31 Jul, 2025

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

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4