JavaScript Event originalTarget Property

What You’ll Learn

The originalTarget property is a read-only, non-standard Mozilla Event field for the original target before retargeting. Unlike explicitOriginalTarget, it can also be native anonymous content. Learn feature detection and portable alternatives—with five examples and try-it labs.

Introduction

In everyday web apps you use event.target. Firefox (Gecko) sometimes retargets events—for example when interacting with internal “anonymous” content that implements form controls or other widgets.

originalTarget is Mozilla’s way to still see the original target before that retargeting. It is useful for understanding Firefox internals alongside explicitOriginalTarget—not for cross-browser production apps.

Understanding Event.originalTarget

An instance property that returns the original target of the event before any retargetings.

• Read-only — you inspect it; you do not assign to it.
• Pre-retarget — keeps the original before Firefox retargeting rules apply.
• Anonymous content — unlike explicitOriginalTarget, it can be native 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.originalTarget

Value

The original EventTarget before retargeting (Mozilla). Exact object identity is engine-specific.

Safe read pattern

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

  const original =
    "originalTarget" in event ? event.originalTarget : null;

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

⚖️ originalTarget vs Related Ideas

Examples Gallery

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

button.addEventListener("click", (event) => {
  const supported = "originalTarget" 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 ot = ("originalTarget" in event)
    ? event.originalTarget
    : "(unsupported)";

  console.log("target:", t && t.nodeName);
  console.log("originalTarget:", ot && ot.nodeName
    ? ot.nodeName
    : ot);
});

target: DIV
originalTarget: (unsupported)

function nameOf(node) {
  return node && node.nodeName ? node.nodeName : String(node);
}

para.addEventListener("click", (event) => {
  const lines = ["target: " + nameOf(event.target)];

  lines.push(
    "originalTarget: " +
      ("originalTarget" in event
        ? nameOf(event.originalTarget)
        : "(unsupported)")
  );
  lines.push(
    "explicitOriginalTarget: " +
      ("explicitOriginalTarget" in event
        ? nameOf(event.explicitOriginalTarget)
        : "(unsupported)")
  );

  out.textContent = lines.join("\n");
});

target: P
originalTarget: (unsupported)
explicitOriginalTarget: (unsupported)

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

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

unsupported — use BUTTON

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

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

BUTTON

🚀 Common Use Cases

• Learning Firefox retargeting and anonymous content.
• Comparing with explicitOriginalTarget in Gecko debugging.
• Reading legacy Mozilla docs that mention the original target.
• Teaching why standards properties beat engine-specific ones.
• Side-by-side labs with event.target in Firefox DevTools.

🔧 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.
• Can be native anonymous content (unlike explicitOriginalTarget).
• Related learning: explicitOriginalTarget, isTrusted, currentTarget, Event(), JavaScript hub.

💡 Best Practices