Event bubbling in JavaScript

Event bubbling is a method of event propagation in the HTML DOM API when an event is in an element inside another element, and both elements have registered a handle to that event. It is a process that starts with the element that triggered the event and then bubbles up to the containing elements in the hierarchy. In event bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.

Syntax:

addEventListener(type, listener, useCapture)
    Parameters:

  • type: Use to refer to the type of event.
  • listener: Function we want to call when the event of the specified type occurs.
  • userCapture: Boolean value. Boolean value indicates event phase. By Default useCapture is false. It means it is in the bubbling phase.

Example 1: This example shows the working of event bubbling in JavaScript.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Bubbling Event in Javascript
    </title>
</head>
  
<body>
  
    <h2>Bubbling Event in Javascript</h2>
  
    <div id="parent"><button id="parent">
            <h2>Parent</h2>
        </button>
        <button id="child">
            <p id="child">Child</p>
        </button>
    </div><br>
  
  
    <script>
        document.getElementById(
"child").addEventListener("click", function () {
            alert("You clicked the Child element!");
        }, false);
  
        document.getElementById(
"parent").addEventListener("click", function () {
            alert("You clicked the parent element!");
        }, false);
    </script>
  
</body>
  
</html>

chevron_right


Output:



Output

After Clicking on the Parent button:

After Clicking on the Parent button

After Clicking on the Child button:

After Clicking on the Child button

After Clicking on the Child button

From above example we understand that in bubbling the innermost element’s event is handled first and then the outer: the <p> element’s click event is handled first, then the <div> element’s click event.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.