Event Bubbling and Capturing in JavaScript

In JavaScript, propagation of events is done, which is known as 'Event Flow'. Event Flow is the sequence or order in which the particular web page receives the event. Thus, in JS, the process of event flow depends on the three aspects, which are:

Event Capturing

Event Target

Event Bubbling

Here, in this section, we will learn and discuss the two aspects, which are event bubbling and event capturing. We will try to practically learn these concepts one by one.

Event Bubbling

While developing a webpage or a website via JavaScript, the concept of event bubbling is used where the event handlers are invoked when one element is nested on to the other element and are part of the same event. This technique or method is known as Event Bubbling. Thus, while performing event flow for a web page, event bubbling is used. We can understand event bubbling as a sequence of calling the event handlers when one element is nested in another element, and both the elements have registered listeners for the same event. So beginning from the deepest element to its parents covering all its ancestors on the way to top to bottom, calling is performed.

Example of Event Bubbling

Let's look at the below example to understand the working concept of Event Bubbling:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Event Bubbling</title>
</head>
<body>
  <div id="p1">
    <button id="c1">I am child button</button>
  </div>
  
  <script>
    var parent = document.querySelector('#p1');
      parent.addEventListener('click', function(){
        console.log("Parent is invoked");
      });

   var child = document.querySelector('#c1');
      child.addEventListener('click', function(){
        console.log("Child is invoked");
      });
  </script>
</body>
</html>

Output:

Event Bubbling and Capturing in JavaScript

Explanation of Code:

The above code is a HTML and JavaScript based code.
We have used a div tag having div id = p1 and within div we have nested a button having button id = c1.
Now, within the JavaScript section, we have assigned the html elements (p1 and c1) using the querySelector () function to the variable parent and child.
After that, we have created and included an event which is the click event to both div element and child button. Also created two functions that will help us to know the sequence order of the execution of the parent and child. It means if the child event is invoked first, "child is invoked" will be printed otherwise "parent is invoked" will get printed.
Thus, when the button is clicked, it will first print "child is invoked" which means that the function within the child event handler executes first. Then it moves to the invocation of the div parent function.

The sequence has taken place due to the concept of event bubbling. Thus, in this way event bubbling takes place.

We can also understand the flow of event with the help of the below flow chart:

It means when the user click on the button, the click event flows in this order from bottom to top.

Stopping Bubbling

Beginning from the target and moving towards the top is the bubbling i.e. starting from the child to its parent, it moves straight upwards. But a handler can also take decision to stop the bubbling when the event has been processed completely. In JavaScript, we use the event.stopPropagation () method.

For example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Event Bubbling</title>
</head>
<body>
  <div id="p1">
    <button id="c1" onclick="event.stopPropagation()">I am child</button>
  </div>
 	<script>
    var parent = document.querySelector('#p1');
      parent.addEventListener('click', function(){
        console.log("Parent is invoked");
      });
    var child = document.querySelector('#c1');
      child.addEventListener('click', function(){
        console.log("Child is invoked");
      });
  </script>
</body>
</html>

In the above code, when we click on the button, it will not work because event.stopPropagation () method is being invoked here due to which th parent function will not be invoked.

Note: The event.stopPropagation () method stops the move upwards bubbling (on one event only), but all the other handlers still run on the current element.

In order to stop the bubbling and also prevent the handlers from running on the current element, we can use event.stopImmediatePropagation () method. It is another method that stops the bubbling and execution of all the other handlers. It means if an element has more than one event handler on a single event, all the event handlers bubbling will get stopped using this event.stopImmedaitePropagation () method.

Do not use event bubbling unnecessarily.

Although event bubbling is a convenient approach, it is recommended that it should not be necessarily used. It is because of the event.stopPropagation () method creates pitfalls that are hidden, and these pitfalls can cause some problems at a later stage.

Let's understand it via an example:

Create a nested menu where each submenu handles click on its elements, and to stop the triggering of the outer menu, it invokes the event.stopPropagation () method.
Now for tracking the user's behavior on the click, afterward, we decided to catch clicks on the whole Window for which the document.addEventListener('click') is used.
But as we have called the event.stopPropagation () method, our analytic would not do anything where clicks get stopped due to stopPropagation (), and so we get a dead zone for it.

Although the concept of event bubbling is incomplete without knowing about event capturing, so let's begin with event capturing and try to combine both concepts and completely understand the concept and the working.

Event Capturing

Netscape Browser was the first to introduce the concept of Event Capturing. Event Capturing is opposite to event bubbling, where in event capturing, an event moves from the outermost element to the target. Otherwise, in case of event bubbling, the event movement begins from the target to the outermost element in the file. Event Capturing is performed before event bubbling but capturing is used very rarely because event bubbling is sufficient to handle the event flow.

Example of Event Capturing

Let's see an example code to understand the working of Event Capturing:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Event Capturing</title>
</head>
<body>
  <div id="p1">
    <button id="c1">I am Child</button>
  </div>
  
  <script>
    var parent = document.querySelector('#p1');
    var child = document.querySelector('#c1');

    parent.addEventListener('click', function(){
      console.log("Parent is invoked");
    },true);
	child.addEventListener('click', function(){
      console.log("Child is invoked");
    });
  </script>
</body>
</html>

Output:

Explanation of Code:

The above-described code is based on HTML and JavaScript.
In the HTML portion, we have created a div id holding id = p1. Inside the div, we have nested and created a button with id = c1.
Moving towards the JS code, initially, we have assigned the html element, i.e., the p1 id, to a variable parent using the querySelector () method and the same we have done with the c1 id where we have assigned it to a variable child.
Then we have used a click event and attached it to both the p1 div and c1 button. Also containing a function for printing the appropriate message on the console. It means if the child event is invoked first, then it will print the "Child is invoked" message on the console first, and if the parent event handler is invoked first, it will "Parent is invoked" message on the console first.
Next, we have added a third argument of addEventListner () to true in order to enable event capturing in the parent div.
When we click on the button, it first executes the function, which is attached in the parent div.
Afterward, the onclick () function of the button runs, and it is because of event capturing. Due to event capturing, the event of the parent element executes first, and then the event of the target element gets executed.

So, when we click on the button, the click event is performed in the following sequence, as you can see in the below flowchart: