Event Bubbling & Event Delegation in JS
M. Shahmeer Zaidi
PUCIT '26 | Software Engineer | Amal Fellow | ML | Web Developer | JavaScript | React JS | Bootstrap | Python | C | CPP| C# .Net | Java | MySQL | Teaching Assistant for DSA and Algorithm Analysis @PUCIT
In JavaScript, events in the DOM have a default behavior known as "event bubbling." This concept is analogous to water bubbles rising to the surface. When an event is triggered on an HTML element, it doesn’t only affect that element; instead, the event bubbles up through its ancestor elements until it reaches the root of the DOM. This means that the event is propagated from the target element up through its parent elements, allowing for event handling at various levels of the DOM hierarchy. Take a code example below:
In the given example, the HTML structure consists of a button element nested inside a <span>, which is further nested inside a <div>, and the <div> is contained within the <body> tag. The event bubbling behavior can be observed through the console output when an event, such as a click, is triggered on the button.
The console output for this setup would show the event being logged from the most specific target element (the button) and then bubbling up through each of its parent elements (the <span>, <div>, and <body>) in that order.
If I attach an event listener to the button element that prints "Clicked" when the button is pressed, due to event bubbling, this event will also be triggered on its ancestor elements. This means that clicking on the <span> or <div> will also print "Clicked." This behavior can be cumbersome when you want to assign different events to the ancestor elements, as you would need to write separate event listeners for each one, like this:
After adding event listeners, you might expect that this would prevent event bubbling, ensuring that only the event associated with the specific element is invoked. However, that's not the case. Event bubbling will still occur, meaning that when you click on the <body> element, the events associated with all of its children will also be triggered.
Similarly, clicking on the <div> tag will result in the messages "span was clicked" and "button was clicked" being printed as well. You can observe this behavior below:
领英推荐
StopPropagation( ) Method:
This default behavior can be quite cumbersome, but you can prevent it by using the stopPropagation method. This method halts the event from propagating to ancestor elements, ensuring that the event is only triggered when the specific element it is associated with (in this case, the button) is clicked. The syntax for using stopPropagation looks like this:
function func1(event) {? alert("Button Clicked");?
event.stopPropagation();}
Event Delegation:
Event Bubbling and Event Delegation are often discussed together because they complement each other. Event delegation allows us to avoid writing separate event listeners for each element in the hierarchy. Instead, it enables us to handle events at a higher level in the DOM tree rather than at the exact level where the event occurred.
In simpler terms, with event delegation, you can add a single event listener to a parent element, and it will handle events for all of its child elements. The event will only be triggered for the specific child element that received the event.
For example, in the code below, we attached an event listener to the <div> element, but the event will only be triggered when the button element is clicked.
Event delegation ensures that events are handled consistently across different elements. It allows you to create a predictable flow of event handling, which can be useful when you want to implement features like event chaining or hierarchical event handling.By learning such concepts, you'll get strong command on Javascript.So, lastly, keep learning and exploring to nourish your skills in this exciting journey of web develeopement.
PUCIT '26 | Software Engineer | Machine Learning Enthusiastic | Web Developer | MERN Stack Developer
6 个月Nice brother