What is the difference between event bubbling & event capturing?

Overview

In JavaScript, event bubbling and event capturing are very interesting topics that relate to the propagation of the JavaScript event-listener from parent to child and vice versa.

In JavaScript, an event-listener is a function that waits for the occurrence of a particular event.

To add event-listener to any element, we use the addEventListener() function.

Parameters

This function accepts the following parameters:

• eventName: This is the name of the event. For example, click, mouseup, and so on.
• callback: This is the function to be invoked when the event occurs.
• {capture: boolean}: This is a boolean that specifies whether the mode of event propagation should be bubbling or capturing. The default value of capture is false, and therefore the default mode is event bubbling. To set the mode as event capturing, we need to set the value of capture as true.

What is event bubbling?

The procedure of event propagation from the closest element to the farthest element is called event bubbling.

Whenever an event occurs on an element, the event handlers first run on it, and then that event propagates to its parent element, then to its grandparent element, and so on.

What is event capturing?

The procedure of event propagation from the farthest element to the closest element is called event capturing.

The propagation of event handlers is in the reverse direction of event bubbling. The event handlers first run on the grandparent element, then on the parent element, and finally on the child element.

Code example

Let's see a few examples of event bubbling and event capturing in the following code snippets:

1. Example of event bubbling

Let's look at the code below:

Code explanation

In the HTML tab:

• Line 5: We create a div element with id="grandparent".
• Line 6: We create a div element with id="parent".
• Line 7: We create a div element with id="child".

In the JavaScript tab:

• Lines 3 to 5: We select the grandParent, parent, and child elements present in the DOM using the getElementById() function.
• Lines 8 to 10: We add the click event listener to the grandparent element.
• Lines 13 to 15: We add the click event listener to the parent element.
• Lines 18 to 20: We add the click event listener to the child element.

In the CSS tab:

• We add some styling to the elements.

Output

When the inner-most square (with yellow background) is clicked, the event handler is called on it first and then propagates to the next square (with blue background) and finally to the last square (with red background).

As the event propagates, the callback function of each listener is executed and the respective statement is printed on the console.

2. Example of event capturing

Let's look at the code below:

Code explanation

In the HTML tab:

• Line 5: We create a div element with id="grandparent".
• Line 6: We create a div element with id="parent".
• Line 7: We create a div element with id="child".

In the JavaScript tab:

• Lines 3 and 5: We select the grandParent, parent, and child elements present in the DOM using the getElementById() function.
• Lines 8 to 10: We add the click event listener to the grandparent element.
• Lines 13 to 15: We add the click event listener to the parent element.
• Lines 18 to 20: We add the click event listener to the child element.

Note: We have added {capture: true} on each of the event listeners. This sets the mode of propagation as event capturing.

In the CSS tab:

• We add some styling to the elements.

Output

When the inner-most square (with yellow background) is clicked, the event handler is called on the last square (with red background) and then propagates to the child square (with blue background) and finally to itself.

As the event propagates, the callback function of each listener is executed and the respective statement is printed to the console.