Event Bubbling in DOM: An Interesting Technique To Know About [2024]

Just like how bubbles bubble up when you blow on them, in the field of Document Object Model (DOM), there is a technique called event bubbling which bubbles up and searches for everything related to the event.

This may sound a bit too technical at first glance, but trust me, it is a lot easier than you think and with a right article like this one, it is a piece of cake!

So, without further ado, let’s get started!

Understanding Event Bubbling

As we mentioned earlier, event bubbling might sound like something out of a science experiment, but it’s a key concept in full-stack development, especially when you’re working with JavaScript in the browser.

Getting the hang of this can make your life a lot easier when you’re dealing with DOM manipulation.

What’s the Deal with Event Bubbling?

Event bubbling is like a chain reaction in the DOM. When you trigger an event on an element, it doesn’t just stop there. Instead, it travels up through the element’s ancestors.

So, if you click a button inside a form, that click event will bubble up to the form and then to any other parent elements.

Imagine dropping a pebble in a pond. The ripples spread outwards, touching everything in their path. Similarly, an event bubbles up through the DOM, touching every element along the way.

This means you can set up one event listener on a parent element to handle events from all its child elements. It’s a neat way to keep your code clean and efficient.

Also Read: Mastering jQuery Events: A Comprehensive Guide

How Event Bubbling Works in the DOM?

When an event happens on an element in the DOM, it kicks off an event flow with three phases: capturing, targeting, and bubbling. Event bubbling is the last phase.

During the bubbling phase, the event starts at the target element and bubbles up through the DOM tree, triggering event handlers on each parent element until it reaches the root or gets stopped.

This bubbling behavior is the default, but there’s also the capturing phase, where events are caught as they travel down the DOM tree from the window to the target element.

By mastering event bubbling, you can write more efficient JavaScript and create slick interactions in your web apps.

Read More: JavaScript Tools Every Developer Should Know

Event Phases: A Detailed Look

We saw the gist of what event phases are in the previous section and in this, you will see it in a more detailed manner!

But before we go any further, it is important that you have a basic understanding of backend and full-stack development. If not, consider enrolling for a professionally certified online Full-stack Development Course that teaches you everything about backend frameworks and helps you get started as a developer.

Now, whenever you click, scroll, or type on a web page, you’re setting off a chain reaction in the Document Object Model (DOM).

This chain reaction, known as event propagation, has three stages: capturing, targeting, and bubbling. Knowing how these stages work is key to mastering event handling in JavaScript.

1. Capturing Phase

First up, is the capturing phase. Think of it as the event’s descent from the top of the DOM tree down to the target element. During this phase, event handlers set for capturing get triggered. Not every event goes through this phase; it depends on how you set up your event listener.

To catch an event during the capturing phase, set the third argument of .addEventListener() to true. Here’s a quick example:

element.addEventListener('click', yourEventHandler, true);

While capturing is less common, it can be handy for specific scenarios.

2. Target Phase

Next, we hit the target phase. This is when the event lands on the element that triggered it. If you’ve attached an event listener to this element, it gets executed now. This phase is where most of the action happens since you’re dealing directly with the element in question.

Both capturing and bubbling listeners fire during this phase. If you don’t specify the phase, or set the third argument to false, the handler runs here:

element.addEventListener('click', yourEventHandler);
// or
element.addEventListener('click', yourEventHandler, false);

3. Bubbling Phase

Finally, we have the bubbling phase. Here, the event travels back up the DOM tree from the target element to the root. Event handlers set for this phase fire in the reverse order of the capturing phase, starting from the target and moving up.

Most JavaScript event handling happens during this phase. By default, .addEventListener() attaches handlers for bubbling:

element.addEventListener('click', yourEventHandler);

This phase is great for event delegation in DOM, where a single listener on a parent element handles events for multiple child elements.

Learn More: 6 JavaScript Debugging Tips and Tricks

Real-Life Examples For Event Bubbling

Getting your head around event bubbling in JavaScript is a lot easier when you see it in action. Below, you’ll find some hands-on examples to show how event bubbling works with nested elements and how you can stop it if needed.

How Events Travel in Nested Elements?

Event propagation is how events move through the DOM. When something happens to an element, it can travel down (capturing phase) to the target element and then bubble up (bubbling phase) through its parent elements.

Here’s a simple example to show how event bubbling works with nested elements:

<div id="parent">
  Parent
  <div id="child">
    Child
  </div>
</div>

document.getElementById('child').addEventListener('click', function() {
  alert('Child clicked');
});

document.getElementById('parent').addEventListener('click', function() {
  alert('Parent clicked');
});

If you click on the “Child” div, you’ll first see the alert “Child clicked” followed by “Parent clicked”. This happens because the click event on the “Child” bubbles up to the “Parent”.

Explore More About jQuery DOM Manipulation: Learn Everything About This On-demand Technique [2024]

How to Stop Event Bubbling?

Sometimes, you might not want an event to bubble up through the DOM. JavaScript has a method called stopPropagation() that stops the event from going any further.

Here’s how you can stop event bubbling:

document.getElementById('child').addEventListener('click', function(event) {
  alert('Child clicked');
  event.stopPropagation(); // This stops the event from bubbling up
});

document.getElementById('parent').addEventListener('click', function() {
  alert('Parent clicked');
});

With stopPropagation() called on the event object, if you click on the “Child” div, you will only see the alert “Child clicked”, and the event will not reach the “Parent” div.

Use stopPropagation() carefully, as it can mess with the natural flow of events through the DOM and might interfere with other event listeners.

By playing around with these types of examples, you will have a better grip on event propagation in nested elements and how to handle event bubbling in your JavaScript projects.

Explore: What is jQuery? A Key Concept You Should Know

What is Event Delegation?

You already saw this term in the previous section and now let us understand this in detail. When you’re dealing with events in JavaScript, event delegation is a nifty trick that uses event bubbling to handle things more efficiently.

Let’s break down how you can use event delegation in your JavaScript projects and why it’s a game-changer.

Making Event Delegation Work for You

Event delegation lets you attach one event listener to a parent element instead of sticking multiple listeners on each child element.

This is super handy when you’ve got a bunch of similar elements that need to trigger the same event handler. By using event delegation, you can boost your app’s performance and keep your code cleaner.

Here’s the deal: most of the event bubbling happens through the DOM. When something happens to an element, it bubbles up to its parent elements unless you stop it.

So, you can set up a listener on a parent element to catch events from its kids. This is especially useful when elements are added dynamically to the DOM because you won’t need to attach new listeners every time a new element pops up.

Also Read: A Comprehensive Guide On Virtual DOM: Learn Everything About It

How to Implement Event Delegation in JavaScript?

Here’s how you can get event delegation up and running:

1. Find the parent element where you’ll attach the event listener.
2. Add an event listener to this parent element.
3. Inside the event handler, use event.target to figure out which child element the event came from.
4. Do what you need to do based on the originating element.

Here’s a simple example of event delegation in action:

document.getElementById('parent-element').addEventListener('click', function(event) {
    if (event.target.matches('.child-element')) {
        // Your code for handling the click event on .child-element
    }
});

In this example, click on any child element with the class .child-element will be handled by the same event listener on #parent-element. This method is not only memory-efficient but also makes sure that any new child elements added later will be included under the same event-handling logic.

Mastering event delegation means you can handle events in JavaScript more efficiently and simply. It lets you write less code while still catching and managing events effectively throughout your app.

Know More: Best Javascript Course Online with Certification

Best Practices For Event Bubbling

Getting your event bubbling right in JavaScript can save you from a world of headaches. Let’s dive into some tips to keep your code clean and your app running smoothly.

Dodging Event Bubbling Headaches

Event bubbling in JavaScript can be a bit of a minefield. Here are some tips to keep things running smoothly:

1. Go Easy on event.stopPropagation(): It’s tempting to stop events from bubbling up to parent elements, but overdoing it can make debugging a nightmare. Use it only when you really need to, and remember it messes with the DOM event flow.
2. Watch Those Event Handlers: Too many event handlers can slow things down and cause memory leaks. Make sure to remove listeners when they’re not needed, especially in single-page apps where elements come and go.
3. Know the Defaults: Some elements have default behaviors that can mess with your event handling. For example, links want to navigate away. Use event.preventDefault() to stop these actions when you need to handle things your way.
4. Delegate Wisely: Event delegation is powerful but can backfire if not used carefully. Always check event.target to make sure you’re dealing with the right element.

Boosting Event Handling Efficiency

Efficient event handling keeps your web app snappy. Here’s how to make sure your events don’t bog things down:

1. Use Event Delegation: Instead of attaching listeners to every child element, attach one to a parent element. This way, you handle events from multiple children with a single listener, which is great for performance.
2. Throttle and Debounce: For events that fire rapidly, like resize or scroll, use throttling or debouncing to limit how often your handler runs. Throttling ensures the function runs at most once in a set time while debouncing delays the function until the event stops firing for a bit.
3. Profile Your Handlers: Use browser dev tools to profile your event handlers and spot any performance hogs. Optimize or refactor as needed to keep things smooth.
4. Use Capture Phase When Needed: While bubbling is usually the way to go, sometimes you need to handle events before they reach the target. Use the capture phase for these cases.

By following these tips and best practices, your event handling will be both effective and efficient.

If you want to learn more about Event Bubbling in DOM in full-stack development, then consider enrolling in GUVI’s Certified Full Stack Development Course which not only gives you theoretical knowledge but also practical knowledge with the help of real-world projects.

Also Read: Top 15 Technologies to Learn for a Java Backend Developer

Conclusion

In conclusion, event bubbling is a fundamental concept in the DOM that every web developer should understand. It allows events to propagate from the innermost element to the outermost, enabling efficient event handling and management.

By mastering event bubbling, you can create more interactive and responsive web applications, leveraging its advantages for event delegation and performance optimization.

Understanding how to control and utilize event bubbling effectively can help you write cleaner, more maintainable code and provide a better user experience.

Also Explore: How to Master DOM in Selenium for Beginners

FAQs

1. How does event bubbling differ from event capturing?

Event capturing is the opposite of event bubbling. In capturing, the event starts from the root and moves down to the target element.

2. Why is event bubbling useful for event delegation?

Event bubbling allows a single event listener on a parent element to handle events for multiple child elements, making event management more efficient.

3. What is the difference between stopPropagation() and stopImmediatePropagation()?

stopPropagation() stops the event from bubbling up, while stopImmediatePropagation() stops the event and prevents other event listeners on the same element from being called.

4. Can event bubbling be used with dynamically added elements?

Yes, event bubbling works well with dynamically added elements, making it a powerful tool for managing dynamic content.