Event.type — Eigenschaft · JavaScript-Referenz

Signatur

Event.type

Beschreibung

Die Eigenschaft Event.type enthält den Namen des Ereignisses. Der Wert wird beim Erzeugen des Events festgelegt: Bei Browser-Ereignissen setzt ihn der Browser, bei eigenen Events der erste Parameter des Konstruktors (z. B. new Event("speichern")). Es ist derselbe String, den man an addEventListener() übergibt.

Am nützlichsten ist type, wenn ein einzelner Handler mehrere Ereignistypen verarbeitet. Ein Beispiel ist eine gemeinsame Funktion für mouseenter und mouseleave oder für focus und blur. Mit event.type lässt sich dann innerhalb des Handlers verzweigen, statt mehrere fast gleiche Funktionen zu schreiben. Auch beim Protokollieren oder Debuggen von Ereignissen ist die Eigenschaft hilfreich.

Der Wert ist schreibgeschützt. Eine Zuweisung wird im nicht-strikten Modus stillschweigend ignoriert. Im strikten Modus wirft sie einen TypeError, weil nur ein Getter existiert. Ereignisnamen unterscheiden Groß- und Kleinschreibung: "Click" ist nicht dasselbe wie "click".

Rückgabewert

Typ

string

Beschreibung

Der Name des Ereignisses, z. B. "click", "input", "submit" oder ein selbst gewählter Name bei CustomEvent. Bei einem Event, das mit einem leeren String erzeugt wurde, ist der Wert "".

Beispiele

Ein Handler für mehrere Ereignistypen

const box = document.querySelector('#box');

const handleHover = (event) => {
  // Anhand des Typs unterscheiden
  if (event.type === 'mouseenter') {
    box.classList.add('aktiv');
  } else if (event.type === 'mouseleave') {
    box.classList.remove('aktiv');
  }
  console.log(`Ereignis: ${event.type}`);
};

box.addEventListener('mouseenter', handleHover);
box.addEventListener('mouseleave', handleHover);

Ereignis: mouseenter Ereignis: mouseleave

Typ eines eigenen CustomEvent auslesen

const target = new EventTarget();

target.addEventListener('warenkorb:aktualisiert', (event) => {
  console.log(event.type, event.detail.anzahl);
});

target.dispatchEvent(
  new CustomEvent('warenkorb:aktualisiert', { detail: { anzahl: 3 } })
);

warenkorb:aktualisiert 3

Ereignis-Logger mit Nachschlagetabelle

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

const aktionen = {
  focus: () => console.log('Feld aktiv'),
  blur: () => console.log('Feld verlassen'),
  input: (e) => console.log('Neuer Wert:', e.target.value),
};

const logger = (event) => aktionen[event.type]?.(event);

Object.keys(aktionen).forEach((typ) => input.addEventListener(typ, logger));

// Später wieder entfernen
const aufraeumen = () =>
  Object.keys(aktionen).forEach((typ) => input.removeEventListener(typ, logger));

Feld aktiv Neuer Wert: a Feld verlassen

type ist schreibgeschützt

'use strict';
const ev = new Event('laden');
try {
  ev.type = 'anders';
} catch (err) {
  console.log(err instanceof TypeError); // true
}
console.log(ev.type);

true laden

// Wichtig · Fallstricke

Groß- und Kleinschreibung: Ereignistypen werden exakt verglichen. Wenn Sie auf "Click" lauschen, reagiert der Listener nie auf echte Klicks. Eingebaute Events sind immer kleingeschrieben.
Ohne Präfix „on“: event.type enthält nie das Präfix der Handler-Eigenschaft. Bei onclick ist der Wert "click".
Nicht änderbar: Sie können den Typ nicht nachträglich umschreiben. Wenn Sie ein Ereignis mit einem anderen Namen weiterleiten wollen, erzeugen Sie ein neues Event, z. B. new CustomEvent(neuerTyp, { detail }).
Veraltetes initEvent(): Das alte document.createEvent() zusammen mit initEvent(type, ...) ist veraltet. Verwenden Sie stattdessen die Konstruktoren new Event() bzw. new CustomEvent().
Kompatibilität: Wird von allen Browsern unterstützt, auch von sehr alten. EventTarget und Event sind außerdem in Web Workers und in Node.js ab Version 15 verfügbar.

Siehe auch

Event Event.target Event.currentTarget EventTarget.addEventListener() EventTarget.dispatchEvent() CustomEvent PressureRecord.time