What is event bubbling?

When an event fires on an element, the browser does not deliver it only to that element. It walks the DOM in three phases: capture (from window down to the target), target, then bubble (from the target back up to window). Bubbling is that third phase — the event travels upward through every ancestor, firing any matching listener along the way.

document.body.addEventListener("click", () => console.log("body"));
document.querySelector("#btn").addEventListener("click", () => console.log("button"));

// Clicking the button logs: "button", then "body"

Why it matters: event delegation

Because the event reaches the ancestors, you can attach one listener to a container instead of one per child. This keeps memory down and — more importantly — keeps working for elements added later:

document.querySelector("#todo-list").addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (item) toggleDone(item.dataset.id);
});

Things that trip people up

• event.stopPropagation() halts the bubble. Use it sparingly — an ancestor that legitimately needs the event (an analytics handler, a "click outside to close" dropdown) will silently stop working.
• A few events do not bubble, notably focus, blur, and load. Their bubbling counterparts focusin and focusout exist for delegation.
• event.target is where the event started; event.currentTarget is the element whose listener is running. Inside a delegated handler these differ, and mixing them up is a common bug.