Do you think IIT Guwahati certified course can help you in your career?
Introduction
An event in Javascript is an action or occurrence that happens in the browser. It is often a result of user interaction or other system triggers. Events can be anything from a mouse click, keyboard press, or window resize. It can also be more complex interactions, such as form submissions, element focus changes, or data loading.
In this blog, we will see what events are and what is bubbling in Javascript. So tighten your seatbelts, and let's start learning.
What is Event Bubbling?
In JavaScript, event bubbling is a mechanism that determines the order in which event handlers are executed when an event is triggered on an HTML element that is nested within other elements. When an event occurs on a deeply nested element, such as a button inside a div inside a section, it can "bubble up" through the ancestor elements in the HTML hierarchy, triggering event handlers on each ancestor element in turn.
Note: Events have the default nature of bubbling up, but you can stop this as well. Also, you can detect whether an event bubbles up all the way through the DOM or not using the ‘bubbles’ property.
Syntax
addEventListener (type, listener, useCapture)
Parameter
type: It refers to the type of event
listener: It is the function that we want to call whenever an event of a particular type occurs.
userCapture: It is a boolean value. By default, it is false, indicating it is in the bubbling phase. If it is true it means no bubbling phase right now.
Example of Event Bubbling
Now let's learn event bubbling in Javascript with the help of an example.
HTML Code
HTML
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- Outer div starts here --> <div id="Outer_div">
<h3> Outer Div</h3> <!-- Inner div starts here --> <div id="Inner_div"> <h3> Inner Div</h6> </div>
// Creating a variable for inner div var inner_div = document.getElementById('Inner_div') ; inner_div.addEventListener('click', function() { // Displaying the message console.log('Pressed Inner Div'); });
// Creating a variable for outer div var outer_div = document.getElementById('Outer_div') ; outer_div.addEventListener('click', function(){ // Displaying the message console.log('Pressed Outer Div'); });
You can also try this code with Online Javascript Compiler
In the above example, we created two div elements using HTML. The smaller/inner div element is a child element of the bigger/outer div element. After this nesting, we added CSS and Javascript to the code. In Javascript code, we got the elements by using their id using the getElementById() method. After that, we called the event listener on both div elements and if the user clicks the div element anywhere, we will get a print statement respectively.
Now, whenever we click the outer div number of times, we will get a print statement for the outer div that many times repeatedly.
But, whenever we click on the inner div, the event is also automatically propagated/transferred to the outer div. This will trigger the outer div. Thus, we will also get a print statement for the outer div whenever we click the inner div.
Let us understand the flow of the program using a flow chart:
As we can see from the flow chart, the events follow a hierarchical path. Whenever an event initiates from an element, it propagates that event to its parent elements.
This phenomenon is nothing but an event bubbling in Javascript. Almost all browsers support event bubbling by default. But what if we want an event to run only on a single element and not propagate to the top? To stop event bubbling, we can use the few approaches below.
Stop Event Bubbling
Below are some methods using which we can stop event bubbling in Javascript.
stopPropation() method
stopImmediatePropagation() method
Let’s now look at these methods and learn how they work.
stopPropagation() Method
This method is used whenever we want to stop event propagation from the child element to the parent element.
Syntax
event.stopPropagation();
Example:
In order to stop the event bubbling in Javascript, we can write the above method in Javascript code for inner div, for example:
var inner_div = document.getElementById('Inner_div');
inner_div.addEventListener('click', function(){
console.log('Pressed Inner Div');
// This will stop event bubbling
event.stopPropagation();
});
Note: The rest of the HTML and CSS code remains the same.
After making this change in our code, we will get the following output whenever we click the inner div multiple times.
It is important to note that this method only invokes the event handler of the target element. Thus this method could successfully stop the process of event bubbling in Javascript.
Note: It is recommended not to use this method often because it may create unexpected problems later.
stopImmediatePropagation() Method
This is another method using which we can stop event bubbling in Javascript. In DOM, multiple handlers may exist for a single event that may be independent of each other. So using this method, we can stop not only the further propagation of events but also some other event handler of the same event.
Syntax
event.stopImmediatePropagation();
Example:
Let's use this method in our Javascript code and see the result.
We need to make the following changes in our inner div code.
Note: The rest of the HTML and CSS code remains the same.
Wooh! Finally, we are able to stop event bubbling in Javascript completely.
Frequently Asked Questions
What is a bubble in JavaScript?
A bubble in JavaScript typically refers to the Bubble Sort algorithm, which sorts arrays by repeatedly swapping adjacent elements if they are in the wrong order.
What is event bubbling in React JS?
Event bubbling in React JS is a process where events propagate from the target element up through its parent elements, allowing for centralized event handling and manipulation at higher levels.
What is event bubbling in JavaScript interview questions?
Event bubbling in JavaScript is a concept where an event starts from the target element and bubbles up through its ancestor elements, triggering event handlers on each level.
Conclusion
This article discusses the event bubbling in Javascript, along with an example. We also discussed different methods which are used to stop event bubbling in Javascript. We hope this blog has helped you enhance your knowledge of event bubbling in Javascript. If you want to learn more, then check out our articles.
84+ registered