How Event Bubbling Enables Event Delegation

How Event Bubbling Enables Event Delegation

Event delegation is built on event bubbling. Here is how they connect.

The Connection

When you click a child element, the event bubbles to the parent. By putting a listener on the parent, you can handle clicks on all children with one listener.

Without Delegation (Many Listeners)

document.querySelectorAll("li").forEach((li) => {
  li.addEventListener("click", () => console.log(li.textContent));
});

100 list items = 100 listeners. Memory-heavy. New items need new listeners.

With Delegation (One Listener)

document.querySelector("ul").addEventListener("click", (e) => {
  if (e.target.tagName === "LI") console.log(e.target.textContent);
});

1 listener on the parent. Works for existing and new children. Memory-efficient.

Why Bubbling Makes It Possible

The click on <li> bubbles to <ul>. The <ul> listener checks e.target to see which <li> was clicked. Without bubbling, the <ul> listener would never receive the click.

The Takeaway

Event delegation relies on bubbling: a click on a child bubbles to the parent, which checks e.target. One listener handles all children (existing and new). This is memory-efficient and maintenance-friendly. Bubbling is the foundation of delegation.