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 July 2015.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

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

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 Standard # ref-for-dom-eventtarget-eventtarget①

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

EventTarget