Event.currentTarget — Eigenschaft · JavaScript-Referenz

Signatur

Event.currentTarget

Beschreibung

Event.currentTarget liefert das EventTarget, an dem der aktuell laufende Listener hängt. Während ein Ereignis durch den DOM-Baum wandert (Capturing- und Bubbling-Phase), ändert sich dieser Wert bei jedem Element, dessen Listener aufgerufen wird. event.target bleibt dagegen immer das Element, an dem das Ereignis ursprünglich ausgelöst wurde.

Besonders wichtig ist der Unterschied bei der Ereignisdelegation und bei verschachteltem Markup: Klickt man auf ein <span> innerhalb eines <button>, ist target das <span>, currentTarget aber der Button, an dem der Listener registriert wurde. Wer zuverlässig auf das „eigene“ Element zugreifen will (z. B. um dataset-Werte zu lesen), verwendet daher currentTarget.

In klassischen function-Handlern entspricht currentTarget dem Wert von this. Bei Pfeilfunktionen ist this lexikalisch gebunden – hier ist event.currentTarget der saubere Weg, an das gebundene Element zu kommen.

Der Wert ist nur während der Ereignisverarbeitung gesetzt. Nach Abschluss der Weiterleitung (also etwa in einem setTimeout oder nach einem await) ist currentTarget null.

Rückgabewert

Typ

EventTarget | null

Beschreibung

Das Objekt (Element, document, window o. ä.), an dem der gerade ausgeführte Listener registriert ist; null, wenn das Ereignis gerade nicht verarbeitet wird.

Beispiele

Unterschied zwischen target und currentTarget

// HTML: <button id="save" data-action="save"><span>💾</span> Speichern</button>
const button = document.querySelector('#save');

button.addEventListener('click', (event) => {
  console.log('target:', event.target.tagName);
  console.log('currentTarget:', event.currentTarget.tagName);
  console.log('Aktion:', event.currentTarget.dataset.action);
});
// Klick auf das Icon-<span>:

target: SPAN currentTarget: BUTTON Aktion: save

Ein Handler für mehrere Elemente

// HTML: mehrere <li class="tab" data-tab="...">
const tabs = document.querySelectorAll('.tab');

const activateTab = (event) => {
  tabs.forEach((tab) => tab.classList.remove('active'));
  // currentTarget ist immer das <li>, auch bei Klick auf Kindelemente
  event.currentTarget.classList.add('active');
  console.log(`Tab aktiv: ${event.currentTarget.dataset.tab}`);
};

tabs.forEach((tab) => tab.addEventListener('click', activateTab));

Tab aktiv: profil

Ereignis wandert durch den Baum (Bubbling)

// HTML: <div id="outer"><div id="inner"><button id="btn">OK</button></div></div>
const log = (event) => {
  console.log(`${event.currentTarget.id} (target: ${event.target.id})`);
};

['outer', 'inner', 'btn'].forEach((id) => {
  document.getElementById(id).addEventListener('click', log);
});
// Klick auf den Button:

btn (target: btn) inner (target: btn) outer (target: btn)

Fallstrick: currentTarget nach await ist null

const form = document.querySelector('form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  // Referenz sofort sichern!
  const formEl = event.currentTarget;

  await new Promise((r) => setTimeout(r, 100));

  console.log(event.currentTarget);      // null
  console.log(formEl.tagName);            // FORM
});

null FORM

// Wichtig · Fallstricke

Nur während der Weiterleitung gültig: Nach Ende der Ereignisverarbeitung (asynchroner Code, await, setTimeout, console.log(event) und späteres Aufklappen in den DevTools) ist currentTarget null. Benötigte Referenzen daher zu Beginn des Handlers in einer Variablen speichern.
Nicht mit target verwechseln: Bei Ereignisdelegation (Listener am Container) ist currentTarget der Container; das tatsächlich angeklickte Element erhält man über event.target bzw. event.target.closest(selector).
Pfeilfunktionen: this zeigt dort nicht auf das Element – event.currentTarget verwenden.
Shadow DOM: Für Listener außerhalb eines Shadow Roots wird target auf den Host umgeschrieben (Retargeting); currentTarget ist stets das Objekt mit dem Listener.
TypeScript: Der Typ ist EventTarget | null; für Elementzugriffe ist oft ein Cast nötig, z. B. event.currentTarget as HTMLButtonElement.
Kompatibilität: in allen modernen Browsern und Node.js (EventTarget) unterstützt; alte IE-Versionen vor 9 kannten die Eigenschaft nicht.

Siehe auch

Event.target Event.eventPhase Event.composedPath() Event.stopPropagation() EventTarget.addEventListener() Element.closest() Event.originalTarget