JavaScript/DOM/EventTarget

Mit der Schnittstelle EventTarget können Ereignis-Handler registriert und auch wieder entfernt werden. Die Schnittstelle gilt für alle Knoten im DOM und auch für viele andere Objekte der Programmierschnittstellen, die vom Browser bereitgestellt werden (siehe Kategorie:EventTarget).

Konstruktorfunktion

Seit 2021 kann die EventTarget Konstruktorfunktion als generell verfügbar betrachtet werden. Sie ermöglicht es, generische Ereignisquellen zu erzeugen, auf die andere sich registrieren können und auf denen man mit dispatchEvent Ereignisse auslösen kann.

Vor allem ist es auch möglich, eigene Klassen von EventTarget abzuleiten und damit den JavaScript Ereignismechanismus schmerzfrei zu nutzen

Eigene, eventfähige Klasse für beobachtbare Variablen

class Observable extends EventTarget {
   #value;

   constructor() {
      super();
   }

   get value() { return this.#value; }

   set value(newValue) {
      const oldValue = this.#value;
      this.#value = newValue;
      this.dispatchEvent(
         new CustomEvent("value-changed", { bubbles: true, detail: oldValue })
      );
   }
}

const name = new Observable();
name.addEventListener(
   "value-changed",
   (event) => console.log("Name geändert von %s in %s", event.detail, event.target.value)
);

name.value = "Mozilla";
name.value = "Selfhtml";

Die Zuweisung an name.value löst im Property-Setter das value-changed Event aus und die Änderung wird in der Konsole protokolliert.

Methoden

• addEventListener
• dispatchEvent
• removeEventListener

Siehe auch

• Event
• alphabetische Liste aller Events

Weblinks

• W3C: EventTarget
• WHATWG: eventTarget
• MDN: EventTarget API