Event delegation

JavaScript course · Intermediate · Lesson 39/134

Learn to manage many child elements with a single listener on a parent.

Event delegation

When you have many similar elements (for example buttons in a list), instead of adding a separate listener to each, you add a single listener on the parent. This is called event delegation. Thanks to bubbling, the parent catches the children's events.

list.addEventListener('click', (event) => {
  if (event.target.matches('button')) {
    console.log('button clicked');
  }
});

This means fewer listeners; it saves memory and also works for elements added later.

Finding an ancestor with closest

Sometimes the clicked element sits inside the one you want (for example an icon inside a button). The event.target.closest() method finds the nearest ancestor that matches a selector. This way you catch the right element in nested structures.

list.addEventListener('click', (event) => {
  const button = event.target.closest('button');
  if (button) console.log(button.textContent);
});

matches only checks the target itself; closest searches upward from the target. In nested elements, closest is safer.

Exercise Add a delegation listener on the list

Define a list variable and select the #list element. Add a single click listener and check whether the clicked element is a button with event.target.matches('button').

Show example solution

const list = document.querySelector('#list');
list.addEventListener('click', (event) => {
  if (event.target.matches('button')) {
    console.log('button clicked');
  }
});

Test yourself

What is the main advantage of event delegation?
```
list.addEventListener('click', (event) => {
  if (event.target.matches('button')) {
    console.log('clicked');
  }
});
```
- Manage many elements with a single listener
- Events fire faster
- Prevent the default behavior
- Stop event bubbling
Show answer

Manage many elements with a single listener — Correct! Delegation manages many elements with one listener.

Check whether the target is a button

list.addEventListener('click', (event) => {
  if (event.target.____('button')) {
    console.log('clicked');
  }
});

Show answer

list.addEventListener('click', (event) => {
  if (event.target.matches('button')) {
    console.log('clicked');
  }
});

Match methods to their meanings

event.target

The clicked element
closest()

Nearest ancestor matching selector
matches()

Does element match selector

Event delegation