What is "event delegation"?

JavaScriptJunior~2 min read

Definition

Event delegation is a technique where we attach a single handler to the parent element, instead of every child, and use event.target to determine on which descendant the event occurred.

In other words: we "intercept" the bubbled event at the parent's level, instead of attaching a handler to every element.

Example without delegation

javascript

<ul>
  <li>Home</li>
  <li>Catalog</li>
  <li>Contacts</li>
</ul>

<script>
  document.querySelectorAll('li').forEach((li) => {
    li.addEventListener('click', () => {
      console.log('Clicked item:', li.textContent);
    });
  });
</script>

Downsides:

many handlers are created (one per <li>),
elements added dynamically will not be listened to.

Example with delegation

javascript

<ul id="menu">
  <li>Home</li>
  <li>Catalog</li>
  <li>Contacts</li>
</ul>

<script>
  const menu = document.querySelector('#menu');

  menu.addEventListener('click', (event) => {
    if (event.target.tagName === 'LI') {
      console.log('Clicked item:', event.target.textContent);
    }
  });
</script>

Now there is only one handler, and it:

catches clicks from every <li> (thanks to bubbling),
works even for new items added through JS.

How it works

The user clicks a specific <li>.
The event bubbles up to <ul>.
There is a single handler at the <ul> level.
Through event.target we find out which element was clicked.

Example with dynamic content

javascript

menu.insertAdjacentHTML('beforeend', '<li>About us</li>');
// the new element will also be "listened to" - nothing needs to be added

Delegation works automatically even with elements added later.

Example 2: delegation for "Delete" buttons

javascript

<ul id="list">
  <li>Item 1 <button class="delete">×</button></li>
  <li>Item 2 <button class="delete">×</button></li>
  <li>Item 3 <button class="delete">×</button></li>
</ul>

javascript

list.addEventListener('click', (e) => {
  if (e.target.classList.contains('delete')) {
    e.target.closest('li').remove(); // remove the parent element
  }
});

One handler, and any number of elements can be removed. Without delegation you would have to attach a listener to every button.

Advantages of delegation

Advantage	Description
Less code	One handler instead of dozens
Efficiency	Less load on memory and CPU
Flexibility	Works with dynamically added elements
Convenience	All events are handled centrally

Important to remember

event.target is the element the event occurred on; it can be nested (for example, inside a <li>).
Sometimes you need to go up to the parent:

javascript
e.target.closest('li')
a safe way to find the right element.
If there are buttons, links and so on inside the elements, and you do not want a click on them to also be handled, add a check or stopPropagation().

Summary

Concept	What it is
Event delegation	Assigning a single handler to a parent to handle events for all descendants
Based on	Event bubbling
Main tool	`event.target` and `closest()`
Why it is needed	Reduces code, speeds things up, makes a dynamic DOM convenient to handle

Remember it simply: Delegation is when "the parent listens for the children". One handler, thousands of clicks under control.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.