Event.srcElement — Eigenschaft · JavaScript-Referenz

Signatur

Event.srcElement

Beschreibung

Event.srcElement stammt aus dem alten Ereignismodell von Internet Explorer. Dort gab es event.target nicht, das auslösende Element stand stattdessen in window.event.srcElement. Damit alte Webseiten weiter funktionieren, haben alle modernen Browser die Eigenschaft als Alias für Event.target übernommen. Heute ist sie im DOM-Standard festgeschrieben, dort aber als historisch gekennzeichnet.

Die Eigenschaft ist nur lesbar und liefert dasselbe Objekt wie event.target. Das ist der tatsächliche Auslöser des Ereignisses, zum Beispiel ein <span> innerhalb eines Buttons. Nicht gemeint ist das Element, an dem der Listener registriert ist. Dieses liefert event.currentTarget.

In neuem Code solltest du srcElement nicht verwenden. Nimm stattdessen immer event.target. Nützlich ist srcElement nur noch, wenn du alten Code liest oder pflegst, der Internet Explorer 8 und älter unterstützen musste. Dort findet man oft das Muster e.target || e.srcElement.

Rückgabewert

Typ

EventTarget | null

Beschreibung

Dasselbe Objekt wie event.target, also das ursprüngliche Ziel des Ereignisses (meist ein Element, aber auch window, document, XMLHttpRequest usw.). Der Wert ist null, wenn das Ereignis noch nicht ausgelöst wurde.

Beispiele

srcElement und target sind identisch

const button = document.createElement('button');
button.textContent = 'Klick mich';
document.body.append(button);

button.addEventListener('click', (event) => {
  console.log(event.srcElement === event.target);
  console.log(event.srcElement.tagName);
});

button.click();

true BUTTON

Altes IE-kompatibles Muster modernisieren

// Veralteter Stil (IE8-Zeiten):
function handleClickLegacy(e) {
  e = e || window.event;
  const el = e.target || e.srcElement;
  console.log('Legacy:', el.id);
}

// Moderner Ersatz:
const handleClick = (event) => {
  console.log('Modern:', event.target.id);
};

const link = document.createElement('a');
link.id = 'mehr-lesen';
document.body.append(link);

link.addEventListener('click', handleClickLegacy);
link.addEventListener('click', handleClick);
link.click();

Legacy: mehr-lesen Modern: mehr-lesen

Unterschied zu currentTarget bei Ereignisdelegation

const list = document.createElement('ul');
list.innerHTML = '<li><span>Eintrag 1</span></li>';
document.body.append(list);

list.addEventListener('click', (event) => {
  // srcElement/target = tatsächlich geklicktes Element
  console.log('srcElement:', event.srcElement.tagName);
  // currentTarget = Element mit dem Listener
  console.log('currentTarget:', event.currentTarget.tagName);
  // Zugehöriges <li> finden
  console.log('li:', event.target.closest('li')?.tagName);
});

list.querySelector('span').click();

srcElement: SPAN currentTarget: UL li: LI

// Wichtig · Fallstricke

Veraltet: Verwende in neuem Code immer event.target. srcElement gibt es nur, damit alte Seiten weiter funktionieren. Linter und TypeScript kennzeichnen die Eigenschaft als deprecated.
Browser-Kompatibilität: Chrome, Edge und Safari unterstützen die Eigenschaft schon lange. Firefox unterstützt sie erst seit Version 62. Ältere Firefox-Versionen liefern undefined. Das Muster e.target || e.srcElement ist nur für Internet Explorer 8 und älter nötig und kann heute entfallen.
Nicht verwechseln: srcElement ist nicht currentTarget. Bei Ereignisdelegation zeigt srcElement auf das innerste geklickte Element, zum Beispiel ein <span> oder <svg>.
Shadow DOM: Wie bei target wird der Wert beim Überqueren von Shadow-Grenzen auf den Host umgeschrieben (Retargeting). Das ursprüngliche innere Element bekommst du mit event.composedPath().
Ähnlich veraltet sind window.event, Event.returnValue und Event.cancelBubble. Nutze stattdessen den Listener-Parameter, preventDefault() und stopPropagation().

Siehe auch

Event.target Event.currentTarget Event.composedPath() window.event EventTarget.addEventListener() Event NavigateEvent.sourceElement