DEV Community

Alaa Samy
Alaa Samy

Posted on

Understanding Event Propagation in JavaScript ๐ŸŒ

Event propagation describes how events travel through the DOM tree. Mastering it helps you control event behavior and write efficient code. Letโ€™s dive in!

The 3 Phases of Event Propagation:

When an event (e.g., a click) occurs, it goes through three phases:

1. Capturing Phase:

The event travels down from the root (window โ†’ document โ†’ parent elements) to the target.

2. Target Phase:

The event reaches the element that triggered it (e.g., a clicked button).

3. Bubbling Phase:

The event bubbles up from the target back to the root (default behavior).


Example: Visualizing Propagation Phases:

HTML (nested elements):

<div id="grandparent">
  Grandparent
  <div id="parent">
    Parent
    <div id="child">Child</div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

JavaScript:

const grandparent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');

// Listen during the CAPTURING phase (third argument = true)
grandparent.addEventListener('click', () => {
  console.log('Capturing: Grandparent');
}, true);

parent.addEventListener('click', () => {
  console.log('Capturing: Parent');
}, true);

// Listen during the BUBBLING phase (default)
grandparent.addEventListener('click', () => {
  console.log('Bubbling: Grandparent');
});

parent.addEventListener('click', () => {
  console.log('Bubbling: Parent');
});

child.addEventListener('click', () => {
  console.log('Target: Child');
});
Enter fullscreen mode Exit fullscreen mode

Output when clicking the child div:

Capturing: Grandparent  
Capturing: Parent  
Target: Child  
Bubbling: Parent  
Bubbling: Grandparent
Enter fullscreen mode Exit fullscreen mode

Controlling Propagation

1. Stop Bubbling

Use event.stopPropagation() to halt the eventโ€™s upward travel:

child.addEventListener('click', (e) => {
  console.log('Child clicked!');
  e.stopPropagation(); // Stops the event from bubbling further
});
Enter fullscreen mode Exit fullscreen mode

Result: Only Capturing: Grandparent, Capturing: Parent, and Target: Child will log.

2. Stop Immediate Actions

Use event.stopImmediatePropagation() to prevent other listeners on the same element from firing:

child.addEventListener('click', (e) => {
  console.log('First listener');
  e.stopImmediatePropagation();
});

child.addEventListener('click', () => {
  console.log('Second listener (never runs)');
});
Enter fullscreen mode Exit fullscreen mode

Key Takeaways

  1. Bubbling is the default phase (events propagate upward).

  2. Capturing is rarely used but can be enabled with addEventListener(..., true).

  3. Use event delegation to optimize performance for dynamic content.

  4. Control propagation with stopPropagation() and stopImmediatePropagation().


Understanding event propagation unlocks precise control over user interactions! ๐Ÿš€

Happy Coding ๐Ÿ˜€๐Ÿ˜€


Did you find this helpful? Follow me for more web development tips and tutorials!

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadogโ€™s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more