Event Propagation & Delegation in JS

Discover how JavaScript events travel through the DOM and learn the essential delegation pattern for writing clean, efficient code.

🖱️

Let's see what really happens when you click something on a page. It's more than just a single event.

/* Waiting for a click... */

The Two Phases: Capturing & Bubbling

When an event like a click happens, it doesn't just occur on one element. It embarks on a journey through the DOM in two phases. First, the Capturing Phase (traveling down from the root to the target), and then the Bubbling Phase (traveling up from the target back to the root). By default, listeners react during the bubbling phase.

What is Event Bubbling?

Event Bubbling is the default behavior. If you click a button inside a `div`, the click event first fires on the button, then "bubbles up" to the `div`, then to the `body`, and so on, up to the `window`. This allows parent elements to react to events on their children.

Stopping the Flow: event.stopPropagation()

Sometimes, you don't want an event to bubble up. For instance, clicking a button inside a clickable card shouldn't also trigger the card's click action. You can stop this chain reaction by calling `event.stopPropagation()` inside your event listener.

The Power of Event Delegation

Event Delegation is a powerful pattern where you attach a single event listener to a parent element to manage events for all of its children. Instead of adding a listener to every &lr;li> in a list, you add one to the &lr;ul>. Inside, you check `event.target` to see which &lr;li> was actually clicked. It's more performant and works automatically for new items added to the list.

Practice Zone

Interactive Test 1: Match the Concepts

Drag the JavaScript concept to its correct description.

Arrastra en el orden correspondiente.

Arrastra las opciones:

event.target

event.currentTarget

Bubbling

Completa el código:

The element that initiated the event.______

The element the listener is attached to.______

Event travels up from child to parent.______

Unlock with Premium

Interactive Test 2: Complete the Code

Complete this event delegation code to listen for clicks on &lr;li> elements.

Rellena los huecos en cada casilla.

const list = document.querySelector('');

list.addEventListener('click', function(event) {
  if (.tagName === 'LI') {
    console.log('You clicked an item!');
  }
});

Unlock with Premium

Practice Example: Code Editor

Using event delegation, make it so that clicking any button below adds the class `clicked` to it. Attach only ONE event listener to the `div` with the id `button-container`.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

document.getElementById('button-container').addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    event.target.classList.add('clicked');
  }
});

Unlock with Premium

Knowledge Check

What is the primary advantage of event delegation?

Unlock with Premium

Event Delegation in Action

Event delegation isn't just a theory; it's a practical solution to common problems in web development. Here’s where it shines.

1. Handling Dynamically Added Content

Imagine a "To-Do" list where you can add new items. If you add listeners to each delete button individually, new items won't have the listener. With delegation, the listener on the parent <ul> works for all items, old and new.

// One listener handles all future items
list.addEventListener('click', (e) => {
  if(e.target.className === 'delete-btn') {
    e.target.parentElement.remove();
  }
});

Task 1
Task 2

2. Improving Performance

Attaching hundreds or thousands of event listeners can slow down your site. A single delegated event listener consumes significantly less memory and reduces the initial setup time for your page.

Inefficient:

1000 buttons = 1000 listeners

Efficient:

1000 buttons, 1 parent = 1 listener

Practical Takeaway: Any time you have a list of similar items that need to be interactive, or you're adding elements dynamically, think of event delegation first. It's the cleaner, faster, and more robust solution.

Event Glossary

Event: A signal that something has happened, such as a user clicking a mouse, pressing a key, or the page finishing loading.
Event Listener: A function (or "handler") attached to an element that waits for a specific event to occur on that element.
Event Bubbling: The default phase where an event travels up the DOM tree from the target element to the root, notifying all ancestors.
event.target: A property of the event object that refers to the deepest element that the event originated from.
event.currentTarget: Refers to the element to which the event listener is currently attached, which can be different from `event.target` during bubbling.
event.stopPropagation(): A method that prevents an event from continuing its propagation (bubbling or capturing) up or down the DOM tree.
Event Delegation: The practice of attaching a single event listener to a common ancestor to manage events for multiple descendant elements.