jQuery 同じ要素に複数のイベントを設定する方法

どうもかわうそです！

今日は『jQuery 同じ要素に複数のイベントを設定する方法』について解説します。

同じ要素に対して違うイベントを設定する場合、どうしても記述が長くなってしまいがちです。

短いコードでスマートに解決してみましょう。

今回の予備知識として、以下がおすすめです。

同じ要素に複数のイベントを設定する

onを使用して、第一引数に複数イベントを登録すればokです。

例えば、クリックとマウス―オーバーイベントで、

同じ要素に対し同じ処理をしたい場合

$('div').on('click mouseover', function(e){
  alert('クリックとマウスオーバー');
});

$('div').on('click mouseover', function(e){

alert('クリックとマウスオーバー');

});

これでokです。

ここからは、先ほどの構文でよりスマートなコードが書けるNG事例を紹介します。

同じテキストエリアにクリックイベントとキーダウンイベントを設定したいシーンがあるとしましょう。

<textarea id="sample" placeholder="sample1"></textarea>

1	<textarea id="sample" placeholder="sample1"></textarea>

通常通り書けば

$('#sample').click(function(e){
  alert('イベント発生');
});
$('#sample').keydown(function(e){
 alert('イベント発生');
});

$('#sample').click(function(e){

alert('イベント発生');

});

$('#sample').keydown(function(e){

alert('イベント発生');

});

このような処理になります。

もう少しスマートにいくなら、以下になりそうです。

function sample_func(){
 alert('イベント発生');
}
$('#sample2').click(sample_func).keydown(sample_func);

function sample_func(){

alert('イベント発生');

}

$('#sample2').click(sample_func).keydown(sample_func);

ではonを使用して、第一引数にイベントをまとめてしまいましょう。

$('#sample3').on('click keydown',function(){
 alert('イベント発生');
});

$('#sample3').on('click keydown',function(){

alert('イベント発生');

});

かなりスマートにできました！

今回は

[box class=”box3″]同じ要素で同じ処理[/box]

なのでここまで省略できましたが、知っておいて損はないので、ぜひ使いこなしてください！