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

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

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

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

構文

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

結果

仕様書

Specification
DOM Standard
# ref-for-dom-eventtarget-eventtarget①

ブラウザーの互換性

BCD tables only load in the browser

関連情報