elem.addEventListener("event", (event) => {
//
})
で登録した関数を置き換えたいことがあります
事前に処理内容がわかってるなら関数はそのままで中の if 文で分岐でもいいのですが そうでない場合は関数ごと置き換えたいです
しかしイベントリスナって付け外しが少し面倒です
楽にしたいなと思って考えると リスナとして設定した関数は外部の関数を呼び出すだけにして 外部の関数を置き換えるという方法が考えられます
let fn = () => {}
elem.addEventListener("event", (event) => {
fn(event)
})
const changeHandler = (new_fn) => {
fn = new_fn
}
こうすると登録した関数はそのままで fn を置き換えればいいです
ローカル変数なのでそれを更新する関数 changeHandler を作って それを外部に公開することでリスナの関数を置き換えできます
もう少し扱いやすくしたいので オブジェクトにして関数を作る部分も共通処理としてみます
const createHandler = (ref) => (event) => ref.handler(event)
const ref = { handler: () => {} }
elem.addEventListener("event", createHandler(ref))
これで ref オブジェクトを公開するか ref.handler を更新する関数を公開すれば良いです
しかし 実はこれとほぼ同じ機能が標準で用意されています
addEventListener にハンドラーとして渡すものは関数がほとんどですがオブジェクトを渡すことができます
その場合は handleEvent というプロパティの関数が実行されます
なので
const handler = { handleEvent: () => {} }
elem.addEventListener("event", handler)
とだけ書けば 上のと同じことができます
handler オブジェクトを公開したり handler.handleEvent を更新する関数を公開すれば良いです
あまり知られてないマイナー機能ですね
ただのプロパティの書き換えで済んで removeEventListener して addEventListener するよりも高速なので 再レンダリングするようなライブラリの内部処理で使われていたりします