Event Bubbling

Event bubbling is the phase of DOM event propagation in which an event triggered on a target element travels up through its parent, grandparent and so on to the document. Before that, a capture phase runs from the top down to the target. Most events bubble, though some, like focus and blur, do not.

Why it matters

Bubbling makes event delegation possible: instead of attaching a listener to every item in a long or dynamic list, you attach one to the parent and check event.target. This uses less memory and automatically covers elements added later. It also explains surprises, such as a click on a button inside a clickable card triggering both handlers.

Example

document.querySelector("#list").addEventListener("click", (e) => {
  const li = e.target.closest("li");
  if (!li) return;
  console.log("Clicked item", li.dataset.id);
});

One listener on the <ul> handles clicks on every <li>, including ones added later. e.stopPropagation() halts the upward travel, and e.preventDefault() cancels default behavior; they are different.

Common mistakes

• Overusing stopPropagation(), which breaks analytics and other listeners.
• Mixing up event.target, the original element, with event.currentTarget, the element holding the listener.
• Expecting focus to bubble; use focusin instead.

Related

• DOM
• JavaScript
• Debounce and throttle
• Component

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.