JavaScript Event eventPhase Property

What You’ll Learn

The eventPhase property is a read-only integer that answers: “Which stage of the event trip am I in?” Learn NONE, CAPTURING_PHASE, AT_TARGET, and BUBBLING_PHASE—plus how capture listeners differ from bubble ones—with five examples and try-it labs.

Introduction

When you click a nested button, the browser does not jump straight to that button and stop. The event travels: down from the window (capture), then at the element that was clicked (target), then back up (bubble) if the event bubbles.

event.eventPhase tells your handler which of those stages is active. Compare it with currentTarget (which listener) and bubbles (whether the trip back up happens).

Understanding Event.eventPhase

An instance property that reports the current evaluation phase of the event flow.

• Event.NONE (0) — not being processed right now.
• Event.CAPTURING_PHASE (1) — going down through ancestors (Window → … → parent).
• Event.AT_TARGET (2) — at the event’s target.
• Event.BUBBLING_PHASE (3) — going back up (only if bubbles is true).
• Read-only — the browser sets it during dispatch.
• Baseline Widely available on MDN (since July 2015); also in Web Workers.

📝 Syntax

event.eventPhase

Value

An integer: 0–3, matching the Event.* phase constants above.

Typical pattern

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

el.addEventListener("click", (event) => {
  console.log(names[event.eventPhase]);
  // e.g. "target" when this is the clicked element
}, false);

📜 Phase Constants

⚖️ eventPhase vs Related Ideas

Examples Gallery

Examples follow MDN Event: eventPhase. Use View Output or Try It Yourself.

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

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

2
target

box.addEventListener("click", (event) => {
  if (event.eventPhase === Event.AT_TARGET) {
    event.currentTarget.style.outline = "3px solid tomato";
  }
  console.log("phase:", event.eventPhase);
});

phase: 2
(box outlined)

parent.addEventListener("click", (event) => {
  console.log(
    event.currentTarget.id,
    event.eventPhase === Event.BUBBLING_PHASE
      ? "bubbling"
      : event.eventPhase
  );
}); // capture defaults to false

parent bubbling

parent.addEventListener(
  "click",
  (event) => {
    console.log(
      event.currentTarget.id,
      event.eventPhase === Event.CAPTURING_PHASE
        ? "capturing"
        : event.eventPhase
    );
  },
  true // capture
);

parent capturing

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

function onDivClick(event) {
  const level = names[event.eventPhase] ?? "error";
  log.textContent +=
    `${event.currentTarget.id}; eventPhase: ${level}\n`;
}

// bubble mode (false) or capture mode (true)
d1.addEventListener("click", onDivClick, false);
d2.addEventListener("click", onDivClick, false);
d3.addEventListener("click", onDivClick, false);

d3; eventPhase: target
d2; eventPhase: bubbling
d1; eventPhase: bubbling

🚀 Common Use Cases

• Teaching / debugging event flow in nested UI.
• Running logic only at the true target (AT_TARGET).
• Intercepting early with capture listeners before children run.
• Confirming whether a parent handler is in bubble or capture mode.
• Logging analytics that include phase + currentTarget.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Available in Web Workers.
• At the target, both capture-registered and bubble-registered listeners see AT_TARGET.
• If bubbles is false, there is no bubbling phase after the target.
• Related learning: bubbles, currentTarget, defaultPrevented, addEventListener(), JavaScript hub.

💡 Best Practices