JavaScript Event eventPhase Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word EVENTPHASE

Definition

Event.eventPhase is a read-only integer that tells which stage of the event flow is running right now: none, capturing (down), at the target, or bubbling (up). (MDN: Baseline Widely available since July 2015; also in Web Workers.)

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use event.eventPhase. Start with this line.

JavaScript
event.eventPhase
CallWhat it does
event.eventPhasePrimary signature.

Built into the browser. Read event.eventPhase on an Event instance — no import required.

Library declarations
JavaScript
event.eventPhase

Parameters

ParameterDescription
Capture optionOptional. { capture: true } listens on the way down

Return Value

Return ValueDescription
*The current value of event.eventPhase.

JavaScript Examples

Example 1 — Read the Phase Name

A listener on the clicked element itself usually runs during AT_TARGET.

JavaScript
const names = ["none", "capturing", "target", "bubbling"];

button.addEventListener("click", (event) => {
  console.log(event.eventPhase);       // 2
  console.log(names[event.eventPhase]); // "target"
  console.log(event.eventPhase === Event.AT_TARGET); // true
});
Try It Yourself

How It Works

  1. Click the button. The listener is on the same element as the click target.
  2. Phase is 2. That is Event.AT_TARGET.
  3. Name lookup. Index the friendly names array with eventPhase.
  4. Prefer constants. Compare with Event.AT_TARGET instead of magic 2.

Example 2 — Parent in the Bubbling Phase

Click the child; the parent’s default (bubble) listener reports BUBBLING_PHASE.

JavaScript
child.addEventListener("click", (event) => {
  console.log("child:", event.eventPhase); // 2 AT_TARGET
});

parent.addEventListener("click", (event) => {
  console.log("parent:", event.eventPhase); // 3 BUBBLING_PHASE
  console.log(event.eventPhase === Event.BUBBLING_PHASE); // true
});
Try It Yourself

How It Works

  1. Child runs first. At the target, phase is AT_TARGET (2).
  2. Event bubbles. Clicks bubble by default (bubbles === true).
  3. Parent next. The parent’s bubble listener sees BUBBLING_PHASE (3).
  4. Same event. event.target stays the child; currentTarget is the parent.

Example 3 — Parent in the Capturing Phase

Register the parent with { capture: true } so it runs on the way down.

JavaScript
parent.addEventListener("click", (event) => {
  console.log("parent:", event.eventPhase); // 1 CAPTURING_PHASE
}, { capture: true });

child.addEventListener("click", (event) => {
  console.log("child:", event.eventPhase); // 2 AT_TARGET
});
Try It Yourself

How It Works

  1. Capture first. The parent listener is registered for the capturing phase.
  2. Going down. Before the child runs, parent sees CAPTURING_PHASE (1).
  3. Then the target. The child listener runs with AT_TARGET (2).
  4. Order flipped vs bubble. Capture parents run before the target; bubble parents run after.
Compatibility

Browser Support

Event.eventPhase is marked Baseline Widely available on MDN (since July 2015). It is also available in Web Workers.

✓ Baseline · Widely available

Event.eventPhase

Read-only integer for the current event-flow phase: NONE, CAPTURING_PHASE, AT_TARGET, or BUBBLING_PHASE.

Universal Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
Event.eventPhase Excellent

Bottom line: Safe to use in production. Prefer Event.* constants over magic numbers when branching on phase.

Frequently Asked Questions

It is a read-only integer on an Event that tells which phase of the event flow is running right now: NONE (0), CAPTURING_PHASE (1), AT_TARGET (2), or BUBBLING_PHASE (3).
No. MDN marks Event.eventPhase as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. It is also available in Web Workers.
Capture ({ capture: true } or useCapture true) runs on the way down from Window toward the target. Bubble (the default) runs on the way back up—only if event.bubbles is true. At the target itself, eventPhase is AT_TARGET for both kinds of listeners.
When the event is not being dispatched—for example before or after handlers run, or if you inspect an event object that is not currently flowing through the DOM.
eventPhase tells which stage of the trip you are in. currentTarget tells which element’s listener is running. Together they explain “which phase” and “which node.”
Yes. If bubbles is false, capture still runs, then AT_TARGET, then bubbling is skipped. Processing finishes after the target phase.

Next: explicitOriginalTarget

See Firefox’s original-target view of where the event started.

explicitOriginalTarget →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

JavaScript Event defaultPrevented Property JavaScript Event explicitOriginalTarget Property