Event capturing

JavaScriptJunior~2 min read

Definition

Event capturing is the phase in which an event travels top-down through the DOM tree, from the document root (window → document → html → body → …) down to the element the event occurred on.

After this comes the bubbling phase, in the opposite direction (bottom-up).

Stages an event goes through

Every DOM event goes through three phases:

Capturing phase: the event travels top-down.
Target phase: the event reaches the element it occurred on.
Bubbling phase: the event travels back up.

Visually

javascript

window
  ↓
document
  ↓
<html>
  ↓
<body>
  ↓
<div id="parent">
  ↓
<button id="child"> ← the event happened here
  ↑
<div id="parent">
  ↑
<body>
  ↑
<html>
  ↑
document
  ↑
window

Upward arrows: bubbling. Downward arrows: capturing.

Example: handlers on different phases

javascript

<div id="parent">
  <button id="child">Click me</button>
</div>

javascript

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', () => {
  console.log('Parent - bubbling');
});

parent.addEventListener('click', () => {
  console.log('Parent - capturing');
}, true); // <- third argument = true -> listen on the capturing phase

child.addEventListener('click', () => {
  console.log('Button');
});

Clicking the button produces:

javascript

Parent - capturing
Button
Parent - bubbling

Why this happens:

First the event travels down → the "capturing" handler fires.
Then it reaches the button (the target).
Then it bubbles back up → the "bubbling" handler fires.

How to enable the capturing phase

For a handler to fire on the capturing phase, pass a third argument to addEventListener:

javascript

element.addEventListener('click', handler, true);

or the modern variant:

javascript

element.addEventListener('click', handler, { capture: true });

Example: two handlers on different phases

javascript

document.body.addEventListener('click', () => console.log('body capture'), true);
document.body.addEventListener('click', () => console.log('body bubble'));

Clicking a button inside body:

javascript

body capture
button (target)
body bubble

When to use capturing

In real practice it is needed rarely, but it is useful when:

you need to intercept an event earlier, before it reaches the target (for example, to cancel an action);
you need global control over events (for example, for logging or tracking);
with nested components, where firing with priority "from the top" matters.

Comparison with bubbling

Phase	Direction	When it fires	How to enable
Capturing	top-down	before the target	`{ capture: true }` or `true`
Target	-	on the element the event occurred on	always
Bubbling	bottom-up	after the target	by default

Important

By default, all handlers listen on the bubbling phase, unless capture: true is specified.
You can listen on both phases at once, by setting up two handlers with different settings.
stopPropagation() stops an event on any phase (both during capturing and during bubbling).

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.