Suggest an edit

Improve this article

Refine the answer for “What is "event delegation"?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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>

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>

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

1. The user clicks a specific `<li>`.
2. The event **bubbles** up to `<ul>`.
3. There is a single handler at the `<ul>` level.
4. 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts504 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.