What is event delegation in JavaScript?

When an event happens on an element (like a click), it "bubbles up" through its ancestors in the DOM by default. Event delegation takes advantage of this, letting one listener on a parent handle events for many children.

A practical example

document.getElementById("list").addEventListener("click", function(e) {
  if (e.target.tagName === "LI") {
    console.log("Clicked item:", e.target.textContent);
  }
});

Instead of adding a click listener to every single <li> item, one listener on the parent <ul> catches clicks on any current or future list item, checking e.target to see which one was actually clicked.

Why it's useful

• Performance: far fewer event listeners for long lists, since only one is attached instead of one per item
• Dynamic content: works automatically for elements added to the page later, since the listener lives on the stable parent, not on each item