要素に対してaddEventListenerを使う時
- 監視対象のイベントが2つ以上ある
- 発火時に処理したいコールバックが同じ
こういう場合のコードの書き方について
極力無駄なコードは書きたくないはずです。
そこでJavaScriptでaddEventListenerを使うとき、
複数イベントを一度に追加する方法を考えてみました。
このページの目次
jQueryなら一度に複数イベントを追加できるか…
例えばこういうケースで考えてみます。
- 対象は mouseup touchend の２つ
- どちらも同じコールバックを実行したい
そういう時、jQueryでは簡単に実現できます。
▼ 一度に複数イベントを追加するjQueryコード
1 2 3 4 | $(window).on('mouseup touchend', ()=>{ /// 発火時の処理 console.log('hogehoge') }) |
jQueryはこういう所が便利なんですよね。
でも必ず使えるわけじゃなくて、
- 諸事情があってjQueryを導入できない
- どうしてもjQueryを使いたくない
環境によっては使えないこともあります。
残念ながらaddEventListenerではjQuery的に書けない
そしてライブラリなしのJavaScriptの場合
先ほどのjQuery的な記述ができません。
▼ 例えば次の書き方はできないってこと
1 2 3 4 5 | /// こんな風にはできない window.addEventListener('mouseup touchend', ()=>{ /// 発火時の処理 console.log('hogehoge') }) |
エラーは出ないけど意味が通らないコードです。
できたら便利だけど仕様的に不可能
コールバック関数を逐一定義するのも少し面倒
そこで初めに思いつくのは次の対処法
- 別途でコールバック関数を定義しておく
- それを各イベントごとにリスナー追加する
どういうことかはコードを見ればわかります。
▼ １つのコールバックを複数イベントに結び付ける
1 2 3 4 5 6 7 8 9 10 | function callback(e){ /// 発火時の処理 console.log('hogehoge') console.log('event type : ', e.type) } /// mouseupイベントに追加 window.addEventListener('mouseup', callback) /// touchendイベントに追加 window.addEventListener('touchend', callback) |
処理がハッキリしてるなら↑この方法でも問題なし
でもこの方法にはあ次の欠点もあります。
- 即時関数としてコールバックを渡せない
- コールバック関数の名前に悩んでしまう
- イベント分だけaddEventListenerが必要
別にこれでも間違ってないし、手段の１つです。
ただしコールバック関数に対して固有の名前が必要になってしまうし、いちいち名前を考えるのが面倒。どうせなら即時関数を渡したいというのが本音です。
関数名を考えるのが好きな人なら問題ないですね。
でも僕は違うので別の方法を模索します。
複数イベントをaddEventListenerする冴えた書き方
そこで思いついたのが次の方法です。
▼ 複数イベントをaddEventListenerするコード例
1 2 3 4 5 6 7 | 'mouseup touchend'.split(' ').forEach((eventName)=>{ window.addEventListener(eventName, (e)=>{ /// 発火時の処理 console.log('hogehoge') console.log('event type : ', e.type) }) }) |
先ほどのコードより冴えてる感じがしませんか？
いちいちユニーク関数名を考えなくていいし、即自関数により複数イベントに対してaddEventListenerを実行できています。とってもjQuery的
即時関数を使えるのが最大のメリット
関数名に頭を悩まされなくなります。
以上、JSで複数イベントを一気に追加する方法でした。
