Event.target — Eigenschaft · JavaScript-Referenz

Signatur

Event.target

Beschreibung

Event.target verweist auf das Objekt, das das Ereignis ausgelöst hat. Bei einem Klick ist das also das innerste Element unter dem Mauszeiger, auch wenn der Listener weiter oben im DOM-Baum hängt. Der Wert bleibt während der gesamten Weiterleitung des Ereignisses (Capturing, Target- und Bubbling-Phase) gleich.

Wichtig ist der Unterschied zu Event.currentTarget: currentTarget ist das Element, an dem der gerade ausgeführte Listener registriert ist, target dagegen der eigentliche Auslöser. Diese Unterscheidung ist die Grundlage der Ereignisdelegation: Man registriert einen einzigen Listener auf einem Container und wertet über event.target aus, welches Kind-Element betroffen war. Das spart Listener und funktioniert auch für Elemente, die erst später dynamisch eingefügt werden.

Da target vom Typ EventTarget ist, kann es neben Elementen auch window, document, ein XMLHttpRequest, ein WebSocket oder ein beliebiges eigenes EventTarget-Objekt sein. Bei DOM-Ereignissen ist es oft ein Textknoten-freies Element, kann aber ein verschachteltes Kind wie <span> oder <svg> sein, weshalb man in der Praxis häufig closest() einsetzt.

Rückgabewert

Typ

EventTarget | null

Beschreibung

Das Objekt, an das das Ereignis gesendet wurde, meistens ein Element. Ist null, solange ein mit new Event() erzeugtes Ereignis noch nicht versendet wurde.

Beispiele

target vs. currentTarget beim Klick

// HTML: <div id="box"><button id="btn"><span>OK</span></button></div>
const box = document.querySelector('#box');

box.addEventListener('click', (event) => {
  console.log('target:', event.target.tagName);
  console.log('currentTarget:', event.currentTarget.id);
});
// Klick auf den Text "OK"

target: SPAN currentTarget: box

Ereignisdelegation in einer Liste mit closest()

// HTML: <ul id="todos"><li data-id="1">Einkaufen <button class="delete">✕</button></li></ul>
const list = document.querySelector('#todos');

list.addEventListener('click', (event) => {
  // Auch Klicks auf verschachtelte Kinder des Buttons erfassen
  const button = event.target.closest('button.delete');
  if (!button || !list.contains(button)) return;

  const item = button.closest('li');
  console.log(`Lösche Eintrag ${item.dataset.id}`);
  item.remove();
});

// Funktioniert auch für später eingefügte Einträge
list.insertAdjacentHTML('beforeend', '<li data-id="2">Putzen <button class="delete">✕</button></li>');

Lösche Eintrag 2 (nach Klick auf den zweiten ✕-Button)

Formularfelder generisch auswerten

// HTML: <form id="profil"><input name="vorname"><input name="nachname"></form>
const form = document.querySelector('#profil');
const daten = {};

form.addEventListener('input', (event) => {
  const { name, value } = event.target;
  daten[name] = value;
  console.log(daten);
});

{ vorname: "Anna" }

target bei eigenen EventTarget-Objekten

const bus = new EventTarget();
const event = new Event('ping');

console.log(event.target); // vor dem Versenden

bus.addEventListener('ping', (e) => {
  console.log(e.target === bus);
});

bus.dispatchEvent(event);

null true

// Wichtig · Fallstricke

Nicht mit currentTarget verwechseln: Bei verschachteltem Markup (z. B. Icon im Button) liefert target das innere Element. Wer das Element mit dem Listener braucht, nutzt event.currentTarget oder event.target.closest(...).
Shadow DOM: Ereignisse aus einem Shadow-Tree werden beim Verlassen retargeted. Außerhalb zeigt target auf den Shadow-Host, nicht auf das innere Element. Den echten Pfad liefert event.composedPath() (bei mode: 'closed' nur eingeschränkt).
Typprüfung: target ist nicht zwingend ein Element. Es kann auch window, document oder ein Textknoten sein, etwa bei manchen Selektions- oder Drag-Ereignissen in älteren Browsern. Vor dem Aufruf von closest() oder matches() mit event.target instanceof Element absichern. In TypeScript ist deshalb ein Cast nötig.
Asynchroner Zugriff: target bleibt nach dem Versenden erhalten, currentTarget wird dagegen auf null gesetzt. In setTimeout- oder await-Fortsetzungen ist deshalb nur target verlässlich.
Event.srcElement ist ein veralteter, nicht standardkonformer Alias aus dem alten Internet Explorer. Stattdessen immer target verwenden.
Die Eigenschaft ist schreibgeschützt. Zuweisungen werden stillschweigend ignoriert, im Strict Mode lösen sie einen TypeError aus.

Siehe auch

Event.currentTarget Event.composedPath() Event.eventPhase Element.closest() EventTarget.addEventListener() EventTarget.dispatchEvent() Event.stopPropagation() EventTarget