Event.originalTarget — Eigenschaft · JavaScript-Referenz

Signatur

Event.originalTarget

Beschreibung

Die schreibgeschützte Eigenschaft originalTarget liefert den Knoten, an dem ein Ereignis tatsächlich ausgelöst wurde, bevor die Neuzuordnung des Ziels (Retargeting) greift. Der Browser ordnet das Ziel zum Beispiel dann neu zu, wenn das Ereignis in einem Shadow DOM oder in internen (anonymen) Elementen eines Bedienelements entsteht, etwa im inneren Textfeld eines <input type="number">, in einer Bildlaufleiste oder in den Steuerelementen von <video>. In solchen Fällen zeigt event.target auf den äußeren Host, event.originalTarget dagegen auf den inneren Knoten.

Ohne Retargeting sind originalTarget und target identisch. Nützlich ist die Eigenschaft vor allem beim Debuggen in Firefox, in Browser-Erweiterungen und in privilegiertem Code (Chrome-Code von Firefox). Dort muss man manchmal genau wissen, welcher interne Teil eines Elements das Ereignis empfangen hat.

Die Eigenschaft ist nicht Teil eines Webstandards und gehört zu den Gecko-spezifischen Erweiterungen. Für Webanwendungen gibt es mit event.composedPath()[0] einen standardisierten Ersatz: Er liefert bei offenen Shadow Roots den innersten Knoten. Interne, anonyme Inhalte von Browser-Bedienelementen und geschlossene Shadow Roots werden damit allerdings nicht offengelegt.

Rückgabewert

Typ

EventTarget | null

Beschreibung

Das ursprüngliche Ziel des Ereignisses vor jedem Retargeting. In Browsern ohne Unterstützung ist die Eigenschaft undefined.

Beispiele

target und originalTarget vergleichen (Firefox)

// HTML: <input type="number" id="menge">
const feld = document.getElementById('menge');

feld.addEventListener('click', (event) => {
  console.log('target:', event.target.nodeName);
  // In Firefox kann hier ein internes, anonymes Element erscheinen
  console.log('originalTarget:', event.originalTarget?.nodeName);
  console.log('gleich?', event.target === event.originalTarget);
});

target: INPUT originalTarget: DIV (Firefox, Klick auf internes Element) gleich? false

Browserübergreifend mit Fallback auf composedPath()

const getOriginalTarget = (event) =>
  event.originalTarget ?? event.composedPath?.()[0] ?? event.target;

document.addEventListener('click', (event) => {
  const ursprung = getOriginalTarget(event);
  console.log('Ursprung:', ursprung.nodeName, '| target:', event.target.nodeName);
});

Ursprung: SPAN | target: MEIN-BUTTON

Shadow DOM: Retargeting sichtbar machen

const host = document.createElement('div');
document.body.append(host);
const root = host.attachShadow({ mode: 'open' });
root.innerHTML = '<button>Innen</button>';

document.addEventListener('click', (event) => {
  console.log('target:', event.target.nodeName);                 // Host
  console.log('composedPath[0]:', event.composedPath()[0].nodeName); // Button
  if ('originalTarget' in event) {
    console.log('originalTarget:', event.originalTarget.nodeName);
  }
});

root.querySelector('button').click();

target: DIV composedPath[0]: BUTTON originalTarget: BUTTON (nur Firefox)

// Wichtig · Fallstricke

Nicht standardisiert: Die Eigenschaft gibt es nur in Firefox. Chrome, Edge und Safari kennen sie nicht, dort ist sie undefined. In Produktivcode sollte man sie nicht voraussetzen, sondern per Feature-Erkennung ('originalTarget' in event) oder mit ?? absichern.
Standard-Alternative: event.composedPath()[0] liefert bei offenen Shadow Roots den innersten Knoten. Bei geschlossenen Shadow Roots (mode: 'closed') und bei internen Inhalten von Bedienelementen gibt die Methode diese Knoten absichtlich nicht preis.
In Webinhalten kann originalTarget auf anonyme, interne Knoten zeigen, auf die man kaum zugreifen kann (etwa bei Bildlaufleisten). Vorsicht beim Auslesen von Eigenschaften wie id oder classList: Diese Knoten verhalten sich möglicherweise nicht wie normale Elemente.
Nicht verwechseln mit explicitOriginalTarget, das ebenfalls nur Firefox kennt: Diese Eigenschaft berücksichtigt auch Neuzuordnungen, die nicht auf anonymen Inhalten beruhen (etwa bei synthetischen Ereignissen).
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird stillschweigend ignoriert (im strikten Modus wird ein TypeError ausgelöst).

Siehe auch

Event.target Event.currentTarget Event.composedPath() Event.explicitOriginalTarget Event.composed ShadowRoot Request.isHistoryNavigation