【jQuery】on()を使って要素にイベントの設定を行う!

要素にイベントの設定を行うにはjQueryのon()メソッドを使用します。

jQueryのon()メソッドとはセレクタにマッチする要素にイベントを紐づけるメソッドであり、ボタンや画像などをクリックした際にイベントを発生させることができます。

イベントを発生させるにはclick()がありますが、on()メソッドはclick()メソッドと比べて複数のイベントに1つのイベントハンドラを割り当てたり、複数のイベントそれぞれに個々のイベントハンドラを割り当てることができますので複数のイベントを指定する場合はon()を使用します。

また、on()メソッドによく似たbind()メソッドがありますが、挙動が少し異なりますので注意してください。

今回は、jQueryのon()メソッドを使って要素にイベントの設定を行う方法について以下の内容で解説していきます。

⚫︎ 要素に単数のイベントの設定を行う場合
⚫︎ 要素に複数のイベントの設定を行う場合
⚫︎ 要素に後付けでイベントの設定を行う場合
⚫︎ イベント発生中にデータを渡す場合

⚫︎ jQueryのイベント設定について

ハルトさん

今回はjQueryのon()メソッドで要素にイベントを紐づける方法について説明していきます。

さとみさん

お願いします!

on()とは

on()とは、セレクタにマッチする要素にイベントを紐づけるメソッドとなります。

on()の書き方

on()メソッドの書き方は下記となります。

パラメータ

⚫︎ イベント名:
イベント名を指定する(clickやmouseovereなど)
⚫︎ セレクタ(任意)
イベントを割り当てたいセレクタを指定する
⚫︎ オブジェクトデータ(任意)
イベントオブジェクトに渡すデータを指定する(オブジェクトリテラル式で指定)
⚫︎ イベントハンドラ:
イベントのアクションを関数で指定する

on()メソッドのパラメータにイベント名とイベントハンドラを指定することで要素にイベントを紐づけることができます。
また、パラメータにセレクタを指定すると、指定したセレクタに後付けでイベントを設定することができ、オブジェクトデータを指定すると、イベントオブジェクトにデータ渡した状態で要素にイベントを設定することができます。

イベントの設定を行うサンプルコード

on()で要素にイベントの設定を行うサンプルコードを紹介します。

要素に単数のイベントの設定を行う場合

既にある要素に単数のイベントの設定を行う場合はon()のパラメータにイベント名とイベントハンドラを指定します。

sample.html

style.css

index.js

出力結果

on()のパラメータにイベント名とイベントハンドラを指定することで要素に単数のイベントを紐づけています。
そのため、マウスを要素の上に持っていくと、各要素のid名が表示されます。

要素に複数のイベントの設定を行う場合

on()で要素に複数のイベントを紐づける場合はon()メソッドの引数であるイベント名を半角空白で指定します。

sample.html

style.css

index.js

出力結果

on()のパラメータにイベント名を半角空白を空けて指定することで要素に複数のイベントを紐づけています。
そのため、マウスを要素の上に持っていく場合と要素からマウスを離した場合には各要素のid名が表示されています。

後付けでイベントの設定を行う場合

on()で後付けでイベントの設定を行う場合は第2パラメータにセレクタを指定します。

sample.html

style.css

index.js

出力結果

on()で、第2パラメータにオブジェクトデータを指定することで要素にイベントデータを受け渡してイベントを紐づけることができます。
そのため、要素をクリックすると、第2パラメータで指定したオブジェクトデータをイベントハンドラに渡して表示されています。

さとみさん

on()の第2パラメータにセレクタを指定することで後からセレクタにイベントを設定することができるんですね!

ハルトさん

そうですね。
on()は第2パラメータにセレクタを指定すると、そのセレクタにイベントを紐付けることができます。

イベント発生中にデータを渡す場合

イベント発生中にデータを渡す場合はon()メソッドの第2パラメータにオブジェクトデータで指定します。

sample.html

style.css

index.js

出力結果

on()メソッドのパラメータをオブジェクトデータで指定することでイベント発生中にデータを渡すことができます。
そのため、要素をクリックするオブジェクトデータが表示されます。

jQueryのイベント設定について

jQueryのイベント設定はさまざまな方法がありましたが、「on()」メソッドに統一されています。
delegate()メソッドもon()メソッドを使って同様の処理を実現することができます。

また、イベントを紐づけるメソッドにliveメソッドというものもありますが、バージョン1.9以降で削除されています。

そして、on()メソッドに似ているbind()メソッドがありますが、onメソッドとbind()メソッドの違いはセレクタなどが指定できるか、指定できないかということです。

さとみさん

on()メソッドとbind()メソッドの違いって難しいですね!
言葉だけでは理解できません!

ハルトさん

そうですよね。
実行すると同じように見えますけど、先ほども説明にありましたが、on()メソッドはbindメソッドに比べてパラメータにセレクタを指定できるという点が違いですね。
しかし、パラメータにセレクタを指定できるとできないとでは大きく動きが異なります。
例えば、次のサンプルコードを見てください。

sample.html

style.css

index.js

出力結果

on()メソッドでイベント設定を行った場合は作成された要素の背景色が変化しますが、bind()メソッドでイベント設定を行った場合は作成された要素の背景色が変化しません。

つまり、現状作成されていない要素が対象になるかどうかがon()メソッドとbind()メソッドの違いとなります。

bind()メソッドについて詳しく知りたい場合はこちらをご参考ください。

さとみさん

bind()メソッドでは作成された要素の背景色が変化していませんけど、on()メソッドでは作成された要素も背景色が変化してますね!

ハルトさん

そうですね。
つまり、on()メソッドはパラメータにセレクタを指定できることからイベントを設定する要素は現状作成されていない要素も対象になります。
その為、イベント設定を行う場合はbind()よりon()を使った方が良さそうです。

今回のポイント

on()でイベント設定を行う

⚫︎ 要素にイベントを設定するはjQueryのon()メソッドを使用する

⚫︎ 要素に単数のイベントを紐づける場合はon()のパラメータにイベント名とイベントハンドラを指定する

⚫︎ on()で要素に複数のイベントを紐づける場合はon()メソッドの引数であるイベント名を半角空白で指定する

⚫︎ on()で後付けでイベントの設定を行う場合は第2パラメータにセレクタを指定する

⚫︎ on()でイベント発生中にデータを渡す場合は第2パラメータにオブジェクトデータを指定する

⚫︎ jQueryで要素にイベントを設定する場合はbind()メソッドよりもon()メソッドを使用した方が良い

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し