[jQuery] 複数のイベントを同時に設定する

更新：2019.06.24

jQueryで複数種類のイベントに対して同じ処理を行いたいときがあるかもしれません。例えば、mousedonwイベントとkeydownイベントで同じ処理を行いたいなどです。通常は、メソッドチェーンを使いイベントごとに分けて書きますが、一括で書く方法も存在します。今回は、複数種類のイベントを同時に設定し、コードを少しだけスッキリさせる方法を紹介します。

メソッドチェーンで普通に書くと

▼まず、メソッドチェーンを使ってイベントごとに書く方法です。イベント数だけメソッドチェーンが増えていきます。

JavaScript

let func = function(){ alert('hoge'); };
$('#elm')
	.on('mousedown', func)
	.on('keydown', func);

一括で書く方法

▼一括で書くには、on()メソッドの第1引数にイベント名を半角スペースで区切って指定します。

JavaScript

$(セレクタ).on('イベント名1 イベント名2', 関数);

▼上記のメソッドチェーンで書いたときと同じ動作を行います。少しだけコードがスッキリしました。

JavaScript

let func = function(){ alert('hoge'); };
$('#elm')
	.on('mousedown keydown', func);