Suggest an edit

Improve this article

Refine the answer for “Event capturing”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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**:

1. **Capturing phase**: the event travels top-down.
2. **Target phase**: the event reaches the element it occurred on.
3. **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).

Markdown · drag & drop images · ⌘B / ⌘I shortcuts485 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.