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

どうもかわうそです!

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

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

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

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

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

onを使用して第一引数に複数イベントを登録

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

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

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

これでokです。

長い記述をしてしまってるパターン

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

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

通常通り書けば

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

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

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

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

今回は

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

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

フォローする