If you’ve ever clicked a button inside a <div> and noticed that both the button’s and the parent’s click events fired, you’ve experienced event bubbling.

Event bubbling is one of the most fundamental concepts in JavaScript DOM programming. It affects how user interactions like clicks, keyboard events, form submissions, and mouse events travel through the Document Object Model (DOM).

Understanding event bubbling in JavaScript is essential for writing efficient event handlers, debugging unexpected behavior, implementing event delegation, and answering one of the most frequently asked JavaScript interview questions.

In this guide, you’ll learn how event bubbling works, how it differs from event capturing, when to use stopPropagation() and preventDefault(), and why event delegation is considered one of the most efficient event-handling techniques in modern web development.

What is Event Bubbling?

Event bubbling is the default behavior in JavaScript where an event starts on the target element and then propagates upward through its parent elements until it reaches the document.

Consider the following HTML:

<div id="parent">
    <button id="child">Click Me</button>
</div>

If you click the button, the click event doesn’t stop there.

Instead, it travels upward like this:

Button
   ↑
Div
   ↑
Body
   ↑
HTML
   ↑
Document

This upward movement is known as event bubbling.

How Event Propagation Works

Whenever an event occurs, JavaScript doesn’t simply execute one event listener.

Instead, every event goes through three distinct phases.

Capture Phase
↓

Target Phase

↓

Bubble Phase
↑

Understanding these phases makes event behavior much easier to predict.

20 Essential Questions JavaScript Interview Questions

The Three Event Phases

1. Capture Phase

During the capture phase, the event travels from the top of the DOM tree down toward the target element.

Document
   ↓
HTML
   ↓
Body
   ↓
Div
   ↓
Button

By default, JavaScript doesn’t execute event listeners during this phase unless you explicitly enable capturing.

Example:

element.addEventListener("click", handler, true);

The third argument (true) tells JavaScript to listen during the capture phase.

2. Target Phase

Once the event reaches the clicked element, JavaScript executes the event listener attached directly to that element.

Example:

button.addEventListener("click", () => {
    console.log("Button clicked");
});

3. Bubble Phase

After the target executes, the event moves back up through every parent element.

Button
   ↑
Div
   ↑
Body
   ↑
HTML
   ↑
Document

This is the phase developers encounter most often because bubbling is enabled by default.

Event Bubbling Example

Consider the following HTML:

<div id="parent">
    <button id="child">Click Me</button>
</div>

JavaScript:

const parent = document.getElementById("parent");
const child = document.getElementById("child");

parent.addEventListener("click", () => {
    console.log("Parent clicked");
});

child.addEventListener("click", () => {
    console.log("Button clicked");
});

When you click the button, the output is:

Button clicked
Parent clicked

Even though you clicked only the button, the event bubbled up to the parent.

Event Bubbling vs Event Capturing

Both mechanisms describe how events travel through the DOM, but in opposite directions.

FeatureEvent CapturingEvent Bubbling
DirectionTop → BottomBottom → Top
Default BehaviorNoYes
Starts FromDocumentTarget Element
Commonly UsedRarelyFrequently

Unless you specifically enable capturing, JavaScript uses event bubbling.

How to Stop Event Bubbling

Sometimes you don’t want parent elements to receive the event.

JavaScript provides:

event.stopPropagation();

Example:

child.addEventListener("click", function (event) {

    event.stopPropagation();

    console.log("Button clicked");

});

Now the output becomes:

Button clicked

The parent event never executes.

Use stopPropagation() only when necessary. Preventing events from bubbling unnecessarily can make components harder to compose and debug.

stopPropagation() vs preventDefault()

These two methods are often confused.

They solve completely different problems.

stopPropagation()

Stops the event from moving to parent elements.

event.stopPropagation();

preventDefault()

Prevents the browser’s default behavior.

Example:

<a href="https://example.com">Visit</a>

JavaScript:

link.addEventListener("click", function (event) {

    event.preventDefault();

});

The link no longer navigates.

Comparison

MethodPurpose
stopPropagation()Stops event propagation
preventDefault()Prevents browser’s default action

You can use both together when needed.

What is Event Delegation?

One of the biggest advantages of event bubbling is event delegation.

Instead of attaching an event listener to every child element, you attach a single listener to the parent.

Example:

<ul id="list">
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>

JavaScript:

const list = document.getElementById("list");

list.addEventListener("click", function (event) {

    if (event.target.tagName === "LI") {
        console.log(event.target.textContent);
    }

});

Now every existing and future <li> element works automatically.

No additional event listeners are required.

Why Event Delegation Improves Performance

Many tutorials explain how event delegation works but not why it’s useful.

Imagine a table with 10,000 rows.

Approach 1

Attach one event listener to every row.

10,000 Event Listeners

Approach 2

Attach one listener to the table.

1 Event Listener

Because events bubble upward, the parent can determine which child triggered the event using:

event.target

Benefits include:

  • Lower memory usage
  • Faster page initialization
  • Better performance
  • Works automatically for dynamically added elements
  • Easier code maintenance

This is why event delegation is widely used in modern JavaScript frameworks and libraries.

Understanding event.target vs event.currentTarget

Another common interview question is the difference between these two properties.

event.target

The element that originally triggered the event.

event.currentTarget

The element whose event listener is currently executing.

Example:

parent.addEventListener("click", function (event) {

    console.log(event.target);

    console.log(event.currentTarget);

});

If the button is clicked:

  • event.target → Button
  • event.currentTarget → Parent Div

Understanding this distinction is essential when implementing event delegation.

Common Mistakes

Attaching Too Many Event Listeners

Avoid:

buttons.forEach(button => {
    button.addEventListener("click", handler);
});

Instead, consider event delegation when appropriate.

Using stopPropagation() Everywhere

Stopping propagation unnecessarily can break reusable components and interfere with other event handlers.

Only use it when there’s a clear reason.

Confusing preventDefault() with stopPropagation()

Remember:

  • One prevents browser behavior.
  • One stops event propagation.

They are not interchangeable.

Best Practices

  • Understand the three phases of event propagation.
  • Prefer event bubbling unless capturing is specifically required.
  • Use event delegation for large or dynamic lists.
  • Avoid attaching thousands of individual event listeners.
  • Use stopPropagation() sparingly.
  • Use preventDefault() only when overriding the browser’s default behavior.
  • Leverage event.target for delegation logic.

Frequently Asked Questions

What is event bubbling in JavaScript?

Event bubbling is the default event propagation mechanism where an event starts on the target element and travels upward through its parent elements.

What is the difference between event bubbling and event capturing?

Capturing moves from the document down to the target element, while bubbling moves from the target element back up to the document.

How do I stop event bubbling?

Use:

event.stopPropagation();

This prevents parent event listeners from executing.

What is event delegation?

Event delegation is a technique where a parent element handles events for its child elements using event bubbling and event.target.

When should I use event delegation?

Use event delegation when:

  • Managing large lists.
  • Working with dynamically created elements.
  • Reducing memory usage.
  • Improving application performance.

Additional Learning Resources

Expand your understanding of JavaScript events with these trusted resources:

Related Articles

Continue learning JavaScript fundamentals with these topics:

  • Callback Functions in JavaScript
  • Arrow Functions Explained
  • Function Declaration vs Function Expression
  • map() vs filter() vs forEach()
  • Truthy and Falsy Values in JavaScript
  • JavaScript Event Loop Explained

Final Thoughts

Understanding event bubbling in JavaScript is about more than knowing that events travel upward through the DOM. It’s about understanding how event propagation works, when to stop it, and how to use it to your advantage.

Remember these key takeaways:

  • Every event passes through the capture, target, and bubble phases.
  • Event bubbling is enabled by default.
  • stopPropagation() stops an event from reaching parent elements.
  • preventDefault() prevents the browser’s default action.
  • Event delegation uses bubbling to handle many child elements with a single event listener, improving performance and reducing memory usage.

Mastering these concepts will help you build more efficient web applications, debug event-related issues more effectively, and confidently answer one of the most common JavaScript interview topics.