Platform under construction

Events & Forms

Advanced

Bubbling & Capturing

Many events travel through the DOM. Capturing runs on the way down; bubbling runs on the way back up.

parent.addEventListener("click", handleParent);
child.addEventListener("click", handleChild);

// Child click can be observed by parent.

Events & Forms

Event propagation explains why parent handlers can see child events.

When an event happens on an element, the browser creates a propagation path through ancestors. The capture phase travels down, then the target phase runs, then bubbling travels up.

Most event listeners run during bubbling by default. That is why a click inside a list item can be handled by a listener on the list.

stopPropagation interrupts propagation. It should be used sparingly because it can block other code that legitimately needs to observe the event.

Capture phase

The event travels from outer ancestors toward the target.

Target phase

The event reaches the original target.

Bubble phase

The event travels back up through ancestors.

stopPropagation

Stops the event from continuing through the path.

Examples

Event code should respect how people actually use the interface.

Let parent handlers observe child events

list.addEventListener("click", event => {
  const item = event.target.closest("li");
  if (!item) return;
  item.classList.toggle("active");
});

Stopping propagation everywhere

document.addEventListener("click", event => {
  event.stopPropagation();
});

Code patterns

Reusable examples for quick reference.

These examples are the event patterns you will reuse constantly: listen, inspect, prevent, delegate, validate and submit.

Default bubbling

Parent sees child clicks.

list.addEventListener("click", event => {
  console.log("list received click");
});

Capture option

Listen during the capture phase.

panel.addEventListener("click", handleClick, { capture: true });

Stop carefully

Use only when the event must not continue.

button.addEventListener("click", event => {
  event.stopPropagation();
});

Check event phase

eventPhase shows where the event is.

console.log(event.eventPhase);

Rules that matter

Make interaction predictable.

Events are user-facing code. Good handlers stay small, respect native behavior and keep visual, semantic and data state aligned.

Know the path

Events move through ancestors before and after the target.

Default listeners bubble

Most addEventListener calls observe the bubble phase.

Use capture deliberately

It changes when the listener runs.

Avoid broad stopPropagation

It can break menus, analytics and delegated handlers.

Use closest with bubbling

Delegated handlers often need the relevant ancestor.

Remember not all events bubble

focus and blur have bubbling alternatives such as focusin and focusout.

Production thinking

Strong event handling makes an interface feel reliable instead of accidental.

Why does this matter?

Propagation is the reason event delegation works and the reason some clicks seem to trigger multiple handlers.

Accessibility

Propagation should not interfere with keyboard activation or focus behavior.

Production note

Production code should use propagation intentionally instead of fighting it with stopPropagation everywhere.

SEO note

Propagation mostly affects interaction, but broken click handling can block navigation to crawlable pages.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add { capture: true } to the parent listener.
Add stopPropagation in the child listener.
Clear the output before each click.

Practice assignment

Do this before moving to the next topic.

Create parent and child listeners.
Observe bubbling order.
Explain what capture changes.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Bubbling & Capturing.