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

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.