Mastering Event Delegation in JavaScript

When building dynamic web applications, attaching individual event listeners to many elements can become inefficient. That’s where event delegation comes in — a powerful JavaScript pattern that optimizes performance and simplifies code.

What is Event Delegation?

Event Delegation is a technique that leverages the concept of event bubbling. Instead of adding event listeners to individual child elements, you attach a single listener to a common parent. When events bubble up, you catch them at the parent level and act accordingly.

Why Use Event Delegation?

✅ Fewer event listeners = better performance
✅ Dynamically handle elements added after page load
✅ Cleaner, more maintainable code

Example Without Event Delegation

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

<script>
  const items = document.querySelectorAll('#menu li');
  items.forEach(item => {
    item.addEventListener('click', () => {
      console.log(item.textContent);
    });
  });
</script>

This works, but it adds a separate listener to each <li>.

Using Event Delegation

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

<script>
  document.getElementById('menu').addEventListener('click', (e) => {
    if (e.target && e.target.tagName === 'LI') {
      console.log(e.target.textContent);
    }
  });
</script>

The click event bubbles from <li> to <ul>.
We catch it at the <ul> level.
Inside the listener, we use e.target to figure out which child was clicked.

When to Use

Use event delegation when:

You have many similar child elements.
The child elements are added/removed dynamically.
Performance is a concern.

Gotchas

Make sure you check the e.target properly to avoid unexpected behavior.
Use stopPropagation() carefully if needed — it prevents bubbling.
Works best with bubbling events (not all events bubble, e.g., blur or focus).

🔚 Conclusion

Event delegation is a smart way to simplify your JavaScript and improve performance in applications with many dynamic elements. It’s especially helpful in frameworks like React, but it’s just as powerful in vanilla JavaScript.

Happy coding!