JavaScript

Event Bubbling or Event Capturing in JavaScript

When an event occurs, event propagation determines the element order for the execution of the events. In the HTML Document Object Model (DOM), two methods exist for event propagation: Event Bubbling and Event Capturing. In Event Bubbling, the event related to the innermost or the child element is processed first. In contrast, in Event Capturing, an event associated with the outermost or parent’s element is handled, and then the event flow control approaches the child element step by step.

This write-up will discuss JavaScript Event Bubbling and Event Capturing. Moreover, the examples related to Event Bubbling and Event Capturing will be demonstrated in this article. So, let’s start!

Event Bubbling in JavaScript

In JavaScript, Event Bubbling is an event that bubbles up from the target or the innermost elements to its parents, then it follows a bottom to top approach and moves the event control flow to its ancestors. Event bubbling is considered as default event flow method in all modern browsers.

Example: Event Bubbling in JavaScript

In the following example, we have added a title with the <title> tag, a div element with the id “parentElement” and its nested child button element having the id “childElement”:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Event Bubbling</title>
</head>
<body>
  <div id="parentElement">
    <button id="childElement">Child</button>
  </div>

After fetching the created HTML elements using the “document.querySelector()” method, we will add an event listener to both the div “parentElement” and its nested button “childElement”. The function passed in the “addEventListener()” will display the added string in the “console.log()” method:

  <script>
    var parent = document.querySelector('#parentElement');
      parent.addEventListener('click', function(){
        console.log("Clicked Parent");
      });

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

Execute the above-given program in your favorite code editor or any online coding sandbox; however, we will utilize the JSBin for this purpose:

Now, we will click on the “Child” button which can be seen in the following output:

By clicking the “Child” button, the passed “function()” in the addEventListener() method will be executed. Then, the “onclick()” method of the “div” element will be invoked. It is happening because of the “Event Bubbling”:

In the above-given example, when we have clicked the “Child” button, the “click” event is passed from the button having id “childElement” and event flow control moves to the “document” in the following order:

How to stop Event Bubbling in JavaScript

Using the “event.stopPropagation()” method, you can easily stop the event bubbling in your JavaScript program, and it stops the event travel from bottom to top.

Example: Stop Event Bubbling in JavaScript

In the below-given example, we will add the “event.stopPropagation()” method to the “onclick()” event of the created button having id “childElement”. As a result of it, the JavaScript interpreter will not pass the event to the outermost “document” element:

<!DOCTYPE html>
<html>
<head>
  <title>How to stop Event Bubbling</title>
</head>
<body>
  <div id="parentElement">
    <button id="childElement" onclick="event.stopPropagation()">Child</button>
  </div>
 
  <script>
    var parent = document.querySelector('#parentElement');
      parent.addEventListener('click', function(){
        console.log("Clicked Parent");
      });
    var child = document.querySelector('#childElement');
      child.addEventListener('click', function(){
        console.log("Clicked Child");
      });
 </script>
</body>
</html>

Clicking on the highlighted button will only print out “Clicked Child” and then it stops the event from bubbling:

Event capturing in JavaScript

The process in which an event is captured when its flow of control moves from the top element to the target element is known as Event capturing. Although modern browsers do not have the capability to enable event capturing by default, you can perform this operation through JavaScript code.

Example: Event Capturing in JavaScript

In our JavaScript program, first of all, we will add a title and a “div” element having id “parentElement” and its child element with “childElement” id:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Event Capturing</title>
</head>
<body>
  <div id="parentElement">
    <button id="childElement">Child</button>
  </div>

Next, we will invoke the “document.querySelector()” method to get the parent and child element:

<script>
    var parent = document.querySelector('#parentElement');
    var child = document.querySelector('#childElement');

After doing so, event listeners are added to both HTML elements by using the “addEventListener()” method. To enable the “Event Capturing” in the parent div element, we will also set the third parameter’s value of the addEventListener() method to “true”. This action will force the JavaScript interpreter to firstly execute the parent element event and then move the event flow control to the target:

parent.addEventListener('click', function(){
      console.log("Clicked Parent ");
    },true);

    child.addEventListener('click', function(){
      console.log("Clicked Child");
    });
  </script>
</body>
</html>

The following “Child” button will first invoke the event added to the parent element. After that, it will execute the event attached to the target:

In the above-given example, when we have clicked the “Child” button, the “click” event is passed from the parent element which is “document,” to the specified event target “childElement” button:

How to Stop event capturing in JavaScript

To stop event capturing, you can utilize the “event.stopPropagation()” method. The difference between stopping the event capturing and event bubbling is that, in event bubbling, we attached the “event.stopPropagation()” method with the event related to the child element, whereas, in event capturing, the event.stopPropagation() method is added in the parent event.

Execute the below-given example to know how to stop event capturing using JavaScript code:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Event Capturing</title>
</head>
<body>
  <div id="parentElement">
    <button id="childElement" onclick="event.stopPropagation()">Child</button>
  </div>
 
  <script>
    var parent = document.querySelector('#parentElement');
    var child = document.querySelector('#childElement');

    parent.addEventListener('click', function(){
      console.log("Clicked Parent ");
      event.stopPropagation();
    },true);


    child.addEventListener('click', function(){
      console.log("Clicked Child");
    });
  </script>
</body>
</html>

The given output signifies that event capturing is stopped after executing the event associated with the parent element:

Here is the full view of the event flow with the event capturing and event bubbling phases:

Conclusion

In JavaScript, Event Bubbling and Event Capturing are the most important concepts with respect to event propagation. In HTML DOM, Event Capturing refers to the propagation of events from ancestor elements to their child. In Event Bubbling, the event control flow moves from the child elements to the ancestors. This write-up discussed JavaScript Event Bubbling and Event Capturing. Moreover, the examples related to Event Bubbling and Event Capturing are also demonstrated in this article.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.