完全互換は面倒ですが最低限 emit/on/off くらいならそこまで難しいものでもないです
webpack とかを使ってる場合は npm パッケージで EventEmitter2 とか EventEmitter3 とかいれることも
ですが 特に何も入れなくても EventEmitter に相当するものが使えました
const et1 = new EventTarget()
et1.addEventListener("foo", eve => {
console.log(eve.detail)
})
et1.dispatchEvent(new CustomEvent("foo", { detail: "ABCD" }))
// ABCD
const et2 = new EventTarget()
et2.addEventListener("foo", ({ detail }) => console.log(detail), { once: true })
et2.dispatchEvent(new CustomEvent("foo", { detail: "1" }))
// 1
et2.dispatchEvent(new CustomEvent("foo", { detail: "2" }))
// (出力なし)
emit 代わりが自分で Event を作らないといけないので少し面倒
それに on も addEventListener と名前が長め
EventEmitter と同じように使える on と emit メソッドを追加しようとも考えましたが リスナ関数をラップすることになって remove するためにラップ関数を管理する必要もでてきてめんどうです
なので on は名前を変えるだけで emit のみ短く書けるように簡単なものを用意しました
class EventEmitter0 extends EventTarget {
emit(type, value) {
this.dispatchEvent(new CustomEvent(type, { detail: value }))
}
on(...a) {
this.addEventListener(...a)
}
}
const ee = new EventEmitter0()
ee.on("foo", ({ detail }) => console.log(detail))
ee.emit("foo", "X")
// X