Home Original page

EventTarget: EventTarget() Konstruktor - Web-APIs | MDN

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2020 browserübergreifend verfügbar.

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

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

html

<button id="dec" aria-label="Decrement">-</button>
<span id="currentValue">0</span>
<button id="inc" aria-label="Increment">+</button>

JavaScript

js

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

Spezifikation
DOM
# ref-for-dom-eventtarget-eventtarget①

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.