JavaScript Fundamentals / Events

Event Delegation

🔍 What is Event Delegation?

Event delegation is a technique where instead of adding event listeners to multiple child elements,

you add one event listener to the parent, and handle events using event bubbling.

✅ Why Use Event Delegation?

✔ Fewer event listeners → better performance

✔ Works for elements added later (dynamic content)

✔ Cleaner and maintainable code

✔ Useful for lists, tables, menus, forms, etc.

🧠 How It Works

  1. A child element is clicked

  2. The event bubbles up to the parent

  3. The parent checks which child triggered the event using event.target

✅ Example Without Event Delegation (Not efficient)

item1.addEventListener('click', handleClick);
item2.addEventListener('click', handleClick);
item3.addEventListener('click', handleClick);

❌ Hard to maintain

❌ Breaks when new items are added

✅ Event Delegation — Full Working HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Event Delegation Example</title>
</head>
<body>

  <h2>Click any item</h2>

  <ul id="lists">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <button id="add">Add New Item</button>

  <script>
    const lists = document.getElementById('lists');
    const addBtn = document.getElementById('add');

    // ✅ Event delegation on parent <ul>
    lists.addEventListener('click', (e) => {
      if (e.target.tagName === 'LI') {
        alert('You clicked: ' + e.target.textContent);
      }
    });

    // ✅ Dynamically adding new items (still works!)
    addBtn.addEventListener('click', () => {
      const newItem = document.createElement('li');
      newItem.textContent = 'New Item';
      list.appendChild(newItem);
    });
  </script>

</body>
</html>

Why This Works

  • The click event on <li> bubbles to <ul>

  • <ul> listener checks the clicked element using e.target

  • No need to add listeners to every <li>

  • Even newly added items are detected ✅