EventTarget: EventTarget() Konstruktor
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Der EventTarget() Konstruktor erstellt eine neue Instanz des EventTarget Objekts.
Hinweis:
Es ist relativ selten, diesen Konstruktor explizit aufzurufen. Meistens wird dieser Konstruktor im Konstruktor eines Objekts verwendet, das die EventTarget Schnittstelle erweitert, indem das super Schlüsselwort verwendet wird.
Syntax
new EventTarget()
Parameter
Keine.
Rückgabewert
Eine neue Instanz des EventTarget Objekts.
Beispiele
Implementieren eines Zählers
Dieses Beispiel implementiert eine Counter Klasse mit den Methoden increment() und decrement(). Es löst ein benutzerdefiniertes "valuechange" Ereignis aus, wenn eine dieser Methoden aufgerufen wird.
HTML
<button id="dec" aria-label="Decrement">-</button>
<span id="currentValue">0</span>
<button id="inc" aria-label="Increment">+</button>
JavaScript
class Counter extends EventTarget {
constructor(initialValue = 0) {
super();
this.value = initialValue;
}
#emitChangeEvent() {
this.dispatchEvent(new CustomEvent("valuechange", { detail: this.value }));
}
increment() {
this.value++;
this.#emitChangeEvent();
}
decrement() {
this.value--;
this.#emitChangeEvent();
}
}
const initialValue = 0;
const counter = new Counter(initialValue);
document.querySelector("#currentValue").innerText = initialValue;
counter.addEventListener("valuechange", (event) => {
document.querySelector("#currentValue").innerText = event.detail;
});
document.querySelector("#inc").addEventListener("click", () => {
counter.increment();
});
document.querySelector("#dec").addEventListener("click", () => {
counter.decrement();
});
Ergebnis
Spezifikationen
| Specification |
|---|
| DOM # ref-for-dom-eventtarget-eventtarget① |
Browser-Kompatibilität
Loading…