Event Bubbling and Event Capturing in JavaScript

Before understanding Event Bubbling and Event Capturing, We should first understand events and the event flow process.

What is an Event?

The event is responsible for the interaction of javascript with HTML web pages. By definition, an event is any act that occurs by someone. Events can be subscribed by listeners that occur only when the particular event can be fired.

A basic example of an event is clicking on the button.

What is Event Flow?

Event flow is the order in which an event is received on the web pages. If you click on an element like on div or on the button, which is nested to other elements, before the click is performed on the target element.

It must trigger the click event of each of its parent elements first, starting at the top with the global window object. By default, every element of HTML is a child of the window object.

History of Event Flow

In the Fourth Generation of Web browser wars, the main browser community, Internet Explorer 4 and Netscape Communicator 4 met with each other for searching solutions to the way of Event flow. Basically, both developer teams met with each other to discuss which way is more suitable for Event Flow. There are two ways Top to Bottom(Event Capturing) and other one is Bottom to Top (Event Bubbling). But unfortunately, both of them apply the opposite approach. Internet Explorer 4 adopts the Event Bubbling approach and Netscape communicator 4 adopts the Event Capturing approach.

Event Bubbling:

Event Bubbling is the event that starts from the deepest element or target element to its parents, then all its ancestors which are on the way to bottom to top. At present, all modern browsers have event bubbling as the default way of event flow.

Consider an example of Event Bubbling :

<!DOCTYPE html>

<html>

<head>

<title>Event Bubbling</title>

</head>

<body>

<button id="child">Child</button>

</div>

var parent = document.querySelector('#parent');

parent.addEventListener('click', function(){

console.log("Parent clicked");

});

var child = document.querySelector('#child');

child.addEventListener('click', function(){

console.log("Child clicked");

});

</script>

</body>

</html>

Code Elaboration :

In the above code, we can create an HTML file with some lines of HTML code and JavaScript Code.
In HTML, we can create a div with an id parent. and its nested button element with an id child.
In the Javascript code, Firstly we can assign the HTML element to the variable with the help of a document.querySelector() function
After that, we can attach, a click event to the parent div and child button also. and both functions just print the value of the string on the console by the use of console.log().
When we click on the button first run the function which is attached to the button, after that onclick() function of div runs. This is due to Event bubbling. First, run the event which is attached to the event target, and then its parents on the way to the window object.

When you click on the button, the event passes from the inner event target (Button whose id is the child) to Document. Click event pass in the following order:

<button>
<div>
<body>
<html>
document

Stop Event Bubbling :

If you want to stop the event bubbling, this can be achieved by the use of the event.stopPropagation() method. If you want to stop the event flow from the event target to the top element in DOM, event.stopPropagation() method stops the event to travel from the bottom to the top.

<!DOCTYPE html>

<html>

<head>

<title>Event Bubbling</title>

</head>

<body>

<button id="child" onclick="event.stopPropagation()">Child</button>

</div>

var parent = document.querySelector('#parent');

parent.addEventListener('click', function(){

console.log("Parent clicked");

});

var child = document.querySelector('#child');

child.addEventListener('click', function(){

console.log("Child clicked");

});

</script>

</body>

</html>

Code Elaboration :

In the above code, we can create an HTML file with some lines of HTML code and JavaScript Code.
In HTML, we can create a div with an id parent. and its nested button element with an id child.
In the Javascript code, Firstly we can assign the HTML element to the variable with the help of a document.querySelector() function
After that, we can attach, a click event to the parent div and child button also. and both functions just print the value of the string on the console by the use of console.log().
One additional task is that we can attach the event.stopPropagation() to stop the event bubbling. In this code, we can add event.stopPropagation() with a button to stop the travel of onclick event from bottom to top. Due to this when we click on button console prints only “child clicked”. The event does not pass from the event target to the document of a webpage.

Event Capturing :

Event Capturing is the event that starts from the top element to the target element. Modern browser doesn’t support event capturing by default but we can achieve that by code in JavaScript.

<!DOCTYPE html>

<html>

<head>

<title>Event Capturing</title>

</head>

<body>

<button id="child">Child</button>

</div>

var parent = document.querySelector('#parent');

var child = document.querySelector('#child');

parent.addEventListener('click', function(){

console.log("Parent clicked");

},true);

child.addEventListener('click', function(){

console.log("Child clicked");

});

</script>

</body>

</html>

Code Elaboration :

In the above code, we can create an HTML file with some lines of HTML code and JavaScript Code.
In HTML, we can create a div with an id parent. and its nested button element with an id child.
In the Javascript code, Firstly we can assign the HTML element to the variable with the help of a document.querySelector()function
After that, we can attach, a click event to the parent div and child button also. and both functions just print the value of the string on the console by the use of console.log().
We can use the third optional argument of addEventListner to set true to enable the event captured in the parent div.
When we click on the button first run the function which is attached on div, after that onclick function of the button runs. This is due to Event Capturing. First, run the event which is attached to the parent element then the event target.

When you click on the button, the event passes from the parent (document) to the event target(Button whose id is the child). Click event pass in the following order: