Event Bubbling vs Capturing

Understanding Event Propagation in JavaScript

When an event occurs in the DOM, such as a user clicking on a button or a form submission, it triggers a series of steps that decide how the event reaches its target element and how it bubbles up or captures down through the DOM. This process is known as Event Propagation.

Event propagation is handled in two main phases:

1. Capturing Phase (also known as “Trickling down”)
2. Bubbling Phase

In this module, we’ll explore both phases and how they affect event handling in JavaScript.

Table of Contents

1. What is Event Propagation?
2. The Capturing Phase
3. The Bubbling Phase
4. Differences Between Bubbling and Capturing
5. Controlling Event Propagation
6. Practical Examples
7. Conclusion

1. What is Event Propagation?

When an event is triggered on a DOM element, it doesn’t just affect that element. Instead, the event will propagate through the DOM tree in one of two directions:

• Capturing Phase: The event starts from the topmost element and travels down to the target element (parent to child).
• Bubbling Phase: The event starts from the target element and bubbles up to the topmost element (child to parent).

The event will propagate through the DOM tree unless we stop it at some point.

2. The Capturing Phase

The capturing phase (or trickling phase) occurs before the event reaches the target element. In this phase, the event moves from the root element to the target element.

In most cases, you don’t need to worry about capturing because it’s the default for most event listeners. However, you can listen for events in the capturing phase using addEventListener() by passing true as the third argument.

Example of Capturing:

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent element - Capturing Phase");
}, true);

document.getElementById("child").addEventListener("click", () => {
  console.log("Child element - Capturing Phase");
}, true);

In this example, if you click the child element, the event will first trigger on the parent element during the capturing phase.

3. The Bubbling Phase

The bubbling phase occurs after the event reaches the target element. During this phase, the event bubbles up from the target element to the root element.

By default, events bubble, and the target element is the first one to receive the event. Then, the event propagates upward to its ancestors (parents, grand-parents, etc.).

Example of Bubbling:

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent element - Bubbling Phase");
});

document.getElementById("child").addEventListener("click", () => {
  console.log("Child element - Bubbling Phase");
});

In this case, if you click the child element, the event will first trigger on the child element, and then bubble up to the parent element.

4. Differences Between Bubbling and Capturing

5. Controlling Event Propagation

You can control the event propagation by using the following methods:

• event.stopPropagation(): Stops the event from propagating further, either during the capturing or bubbling phase. Example: document.getElementById("child").addEventListener("click", (event) => { console.log("Child clicked"); event.stopPropagation(); // Prevent the event from bubbling });
• event.stopImmediatePropagation(): Stops the event from propagating further and also prevents any other event listeners of the same event from being called. Example: document.getElementById("child").addEventListener("click", (event) => { console.log("Child clicked"); event.stopImmediatePropagation(); // Prevents further handlers on this element });

6. Practical Examples

Let’s see a practical example of how event propagation works with both capturing and bubbling phases.

Example 1: Capturing vs Bubbling

<div id="parent">
  <button id="child">Click me!</button>
</div>

<script>
  // Capturing phase
  document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent element - Capturing Phase");
  }, true);

  // Bubbling phase
  document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent element - Bubbling Phase");
  });

  document.getElementById("child").addEventListener("click", () => {
    console.log("Child element - Bubbling Phase");
  });
</script>

Here, when the button is clicked, the logs will be as follows:

• Capturing Phase: Parent element first.
• Bubbling Phase: Child element first, followed by the parent element.

Example 2: Stopping Propagation

<div id="parent">
  <button id="child">Click me!</button>
</div>

<script>
  document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent element clicked");
  });

  document.getElementById("child").addEventListener("click", (event) => {
    console.log("Child element clicked");
    event.stopPropagation(); // Stop the event from bubbling up
  });
</script>

Here, when you click the button, you’ll see:

• Child element clicked
• The Parent element clicked will not be logged because stopPropagation() is called.

7. Conclusion

Understanding Event Bubbling vs Capturing is vital for controlling how events propagate through the DOM and how to handle user interactions effectively. By using event propagation techniques like stopPropagation() and leveraging both capturing and bubbling phases, you can have greater control over your event-driven applications.