EventTarget: EventTarget() コンストラクター

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年9月.

メモ: この機能はウェブワーカー内で利用可能です。

EventTarget() コンストラクターは、新しい EventTarget オブジェクトのインスタンスを作成します。

メモ: このコンストラクターを明示的に呼び出すことは、非常にまれです。ほとんどの場合、このコンストラクターは EventTarget から派生したオブジェクトのコンストラクターの中で、 super キーワードによって使用されます。

構文

new EventTarget()

引数

なし。

返値

EventTarget オブジェクトのインスタンス。

例

カウンターの実装

この例では、 increment() メソッドと decrement() メソッドを持つ Counter クラスを実装します。これらのメソッドが呼び出されると、カスタムイベント "valuechange" が発生します。

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();
});