Have you ever added dozens of click event listeners to buttons inside a list, only to realize there might be a better way?

That better way is called event delegation, and it can save you time, memory, and complexity.

What Is Event Delegation?

Event delegation is a technique where you add a single event listener to a parent element, and use it to manage events triggered by its child elements.

Instead of writing:

buttons.forEach(btn => {
  btn.addEventListener('click', handleClick);
});

You write:

document.querySelector('#list').addEventListener('click', handleClick);

This works because of event bubbling — when an event is triggered on a child element, it bubbles up through its ancestors.

Why Use Event Delegation?

Example: A To-Do List

Here is our HTML section:

<div id="todo-list">
  <button data-id="1">Delete Task 1</button>
  <button data-id="2">Delete Task 2</button>
  <button data-id="3">Delete Task 3</button>
</div>

Here is the Javascript:

const list = document.getElementById('todo-list');

list.addEventListener('click', function (event) {
  if (event.target.tagName === 'BUTTON') {
    const taskId = event.target.dataset.id;
    console.log(`Deleting task ${taskId}`);
  }
});

When you click any button, the console will show:

Deleting task 1
Deleting task 2
Deleting task 3

Only one event listener is used, and it works for all buttons.

Handling Dynamic Elements

Suppose you add a new button dynamically:

const newButton = document.createElement('button');
newButton.textContent = 'Delete Task 4';
newButton.dataset.id = '4';
list.appendChild(newButton);

🔥 You do not need to add a new event listener. The existing listener on the parent will still handle the event. This is one of the main benefits of event delegation.

How It Works: Bubbling and Targeting

Event delegation relies on two key mechanisms:

1. Event bubbling: events move from the target element up to the ancestors.
2. Event targeting: you check event.target to determine which child element triggered the event.

Example:

list.addEventListener('click', function (event) {
  if (event.target.matches('button[data-id]')) {
    const id = event.target.dataset.id;
    // Perform action
  }
});

You can also use event.target.closest() if you're dealing with nested elements.

Common Use Cases

• Click events on lists, tables, or menus
• Handling dynamic content loaded via JavaScript
• Form validation on inputs (e.g., input, blur)
• Toggle switches, tabs, or modals
• Custom dropdowns or UI components