JavaScript Event explicitOriginalTarget Property

What You’ll Learn

The explicitOriginalTarget property is a read-only, non-standard Mozilla Event field for the non-anonymous original target. Learn how it differs from target / originalTarget, why Firefox retargets some mouse events over text nodes, and how to feature-detect—with five examples and try-it labs.

Introduction

Most tutorials teach event.target—the element the browser reports as the event’s target. In Firefox, Gecko sometimes retargets an event (for example, when a mouse event happens over a text node, it may surface the parent element instead).

explicitOriginalTarget is Mozilla’s way to still see the non-anonymous original target before that retargeting. It is useful for understanding Firefox internals and legacy XUL command demos—not for cross-browser production apps.

Understanding Event.explicitOriginalTarget

An instance property that returns the non-anonymous original EventTarget of the event.

• Value — an EventTarget, or null if there isn’t one.
• Read-only — you inspect it; you do not assign to it.
• Retargeting — if Firefox retargets for reasons other than an anonymous boundary, this can keep the pre-retarget target.
• vs originalTarget — never contains anonymous content (per MDN).
• Non-standard — Mozilla-specific; not on a standards track.
• Web Workers — MDN notes it is available in workers where the engine supports it.

📝 Syntax

event.explicitOriginalTarget

Value

Returns the EventTarget object, or null if there isn’t one.

Safe read pattern

el.addEventListener("click", (event) => {
  // Portable default
  const portable = event.target;

  // Firefox-only extra detail
  const original =
    "explicitOriginalTarget" in event
      ? event.explicitOriginalTarget
      : null;

  console.log(portable, original);
});

⚖️ explicitOriginalTarget vs Related Ideas

Examples Gallery

Examples follow MDN Event: explicitOriginalTarget. Every demo feature-detects so labs still make sense outside Firefox.

button.addEventListener("click", (event) => {
  const supported = "explicitOriginalTarget" in event;
  console.log(supported
    ? "Supported (likely Firefox)"
    : "Not available — use event.target");
});

Not available — use event.target

box.addEventListener("click", (event) => {
  const t = event.target;
  const eot = ("explicitOriginalTarget" in event)
    ? event.explicitOriginalTarget
    : "(unsupported)";

  console.log("target:", t && t.nodeName);
  console.log("explicitOriginalTarget:", eot && eot.nodeName
    ? eot.nodeName
    : eot);
});

target: DIV
explicitOriginalTarget: (unsupported)

para.addEventListener("click", (event) => {
  const lines = [
    "target: " + event.target.nodeName,
  ];
  if ("explicitOriginalTarget" in event && event.explicitOriginalTarget) {
    lines.push(
      "explicitOriginalTarget: " +
        event.explicitOriginalTarget.nodeName
    );
  } else {
    lines.push("explicitOriginalTarget: (unsupported)");
  }
  out.textContent = lines.join("\n");
});

target: P
explicitOriginalTarget: #text

function describeOriginal(event) {
  if (!("explicitOriginalTarget" in event)) {
    return "unsupported — use " + event.target.nodeName;
  }
  const node = event.explicitOriginalTarget;
  if (!node) return "null";
  return node.nodeName + " (nodeType " + node.nodeType + ")";
}

menuItem.addEventListener("click", (event) => {
  console.log(describeOriginal(event));
});

unsupported — use BUTTON

function getUsefulTarget(event) {
  if (
    "explicitOriginalTarget" in event &&
    event.explicitOriginalTarget
  ) {
    return event.explicitOriginalTarget;
  }
  return event.target;
}

el.addEventListener("click", (event) => {
  const node = getUsefulTarget(event);
  console.log(node.nodeName);
});

BUTTON

🚀 Common Use Cases

• Learning Firefox event retargeting (text nodes vs parent elements).
• Reading legacy Mozilla / XUL-era demos that log nodeName.
• Debugging Gecko-only differences next to event.target.
• Comparing with originalTarget when studying anonymous content.
• Teaching why standards properties beat engine-specific ones.

🔧 How It Works

📝 Notes

• MDN: Non-standard — show the banner; not Deprecated / Experimental on that page.
• Mozilla-specific; not part of any current specification.
• Available in Web Workers where the engine supports it.
• Never contains anonymous content (unlike originalTarget).
• Related learning: eventPhase, currentTarget, Event(), addEventListener(), JavaScript hub.

💡 Best Practices