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 キーワードによって使用されます。
構文
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 # ref-for-dom-eventtarget-eventtarget① |
ブラウザーの互換性
Loading…