What is Event Bubbling in JavaScript?

JavascriptWeb DevelopmentFront End Technology

The Events in JavaScript are a change in the state of an object. There are a bunch of events where some activity is performed by the user or browser. When the JavaScript code is included in the HTML, JavaScript will react to the events. This process of reacting to events is known as Event handling.

Event bubbling

The Event bubbling in JavaScript is a type of event propagation. The event triggers the innermost target element and consecutively triggers the parent element of the target element in the same hierarchy until it triggers the outermost element.

It is a procedure where it starts from the element that triggered the event and then bubbles up to the ancestor elements in the hierarchy.

Let’s get a clear understanding of the flow of event bubbling, where the flow goes from the target element to the outermost element. Below is the view of the flow.


Syntax

The following is the syntax of Event bubbling −

addEventListener(type, listener, useCapture)

Parameters

  • type− Used to refer to the type of event.

  • listener− The function which we want to call when the event of the particular type occurs.

  • userCapture− it is a Boolean value. It indicates the event phase. It will be false by default and that indicates it is in the bubbling phase.

Example 1

Let us look at an example of event bubling −

<!DOCTYPE html> <html> <head> <title>Bubbling Event in Javascript</title> <style> .button { background-color: #555555; border-radius: 100px; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 10px; } </style> </head> <body> <h2>Virat Kohli Statistics!</h2> <form id="totalruns"> <button class="button"> <h1>Total Runs</h1> </button> <br> <div id="odi"> <button class="button"> <h2>ODI</h2> </button> <br> <button id="t20" class="button"> <h4>T20</h4> </button> </div> </form> <br> <script> document.getElementById("t20").addEventListener("click", function () { alert("Virat kohli Runs in T20 : 3308"); }, false); document.getElementById("odi").addEventListener("click", function () { alert("Virat kohli Runs in ODI : 12344"); }, false); document.getElementById("totalruns").addEventListener("click", function () { alert("Virat kohli total runs : 15652 "); }, false); </script> </body> </html>

On executing the above program, it generates three levels of bubbles representing the Total score, ODI score, and T20 score of ViratKohli.

If you click on a particular bubble the score in the selected section is displayed in the dialog box along with the data of its outer bubbles (simultaneously).

Example 2

In the following example, we have 3 elements div, span, and button.

  • To maintain the hierarchy, we need that button element to be nested inside the span element, and the span element to be nested inside the div element.

  • Assign click events to all the elements so that when an element got clicked, an alert box should open displaying a respected message as shown in the example.

  • After executing the program, the below-shown image will get executed on the screen.

  • When an element got clicked then automatically its outside elements (containing elements) also got bubbled up and executed.

  • For instance, if we click on the innermost nested element(button) then along with its alert box other. element's alert boxes (span, div) will also open one by one following the hierarchy.

  • For suppose, if we click on the span element then the alert box of span and its containing element div will open up one by one.

  • This process of triggering elements and then bubbling up to the containing elements in the hierarchy is called event bubbling.

  • The triggered and bubbled-up elements will be executed.

<html> <head> <style> .styleClass { display:table-cell; border:1px solid black; padding: 20px; text-align:center; } </style> </head> <body> <div class = "styleClass" onclick = "alert('Div clicked')">Div element <span class = "styleClass" onclick ="alert('Span clicked')">span element <input type = "button" value = "click me" onclick="alert('Button clicked')"> </span> </div> </body> </html>

On clicking ok on the above button alert box, we will get the following alert box with the message span clicked.

On clicking ok on the above span alert box, we will get the following alert box with the message div clicked.

raja
Updated on 23-Sep-2022 10:47:49

Advertisements