基本に戻ればむしろ簡単 イベントリスナに引数を渡す方法

ある要素にイベントリスナを登録するとき、だいたい次のようなコードになると思う。

element.addEventListener('click', ()=>{
	alert('click!');
});

あるいはこう。

const callback = ()=>{
	alert('click!');
};
element.addEventListener('click', callback);

このとき、コールバックに引数を渡そうとすると「あれできないぞ」ってなるのがお約束。で、検索すると出てくるのが「handleEventメソッド」を使うやり方である。これは話の本筋じゃないのだが、便宜上解説する。

addEventListenerの第二引数について、MDNにはこう書かれている。

これは null であるか、handleEvent() メソッドのあるオブジェクトか、JavaScript の関数の何れかでなければなりません。

EventTarget: addEventListener() メソッド - Web API | MDN

確かに「handleEvent() メソッドのあるオブジェクト」を渡せるように書いてある。しかしこのページ、ここで急に「handleEvent」とかいう知らんワードが飛び出してくるのだ。めっちゃ戸惑う。それはともかく、せっかくなのでサンプルコードを用意した。

要するに、「handleEvent」という名前のプロパティに関数が入っているオブジェクトを渡せるということだ。妙に特別感のある書き方だったけれど、実態は単なるオブジェクトである。このオブジェクトはhandleEvent()のthisの値になるので、参照することができる。

handleEvent以外のプロパティは自由。だから引数を渡せるというわけ。そう考えてみると、まあ「handleEvent() メソッドのあるオブジェクト」としか表現できないかもな。

ここからが本題。

別に対抗するわけじゃないんだけど、いったん落ち着いて考えて欲しいのだ。こんなトリッキーな方法を使うくらいなら、もっとシンプルで初歩的なやり方があるだろう。みんな知ってるやつが。

たぶん入門書とかでも序盤で触れられていると思うのだが、関数もオブジェクトなのだ。だから関数にもプロパティを追加できる。コールバックにプロパティを追加して引数を渡せばよくないか。プロパティ経由で引数を渡すという点は、handleEventを使った場合と同じだし。

違うのは、thisを使わなくていいこと。これは大きい。thisは値が何なのかぱっと見わからない。くだんのMDNのページでも、わざわざ注意事項の項を作っているくらいだし、あんまり推奨されていないのでは？

あとthisを理解するのって、クラスを扱うくらいにならないと難しいと思う。わからないことを調べているのにわからないことが増える、これ一番ダメなやつ。