【jQuery】bind()を使って要素にイベントを紐づける!

要素にイベントを紐づけるにはjQueryのbind()メソッドを使用します。

jQueryのbind()メソッドとは要素に対してイベントを設定するメソッドであり、ボタンや画像などをクリックした際にイベントを発生させることができます。

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

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

⚫︎ 要素に単数のイベントを紐づける場合
⚫︎ 要素に複数のイベントを紐づける場合
⚫︎ 要素にイベントデータを受け渡してイベントを紐づける場合
⚫︎ 複数のイベントそれぞれに個々のイベントハンドラを割り当てる場合

ハルトさん

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

さとみさん

お願いします!

bind()とは

bind()とは、要素に対してイベントを設定するメソッドとなります。

bind()の書き方

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

パラメータ

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

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

要素にイベントを紐づけるサンプルコード

bind()で要素にイベントを紐づけるサンプルコードを紹介します。

要素に単数のイベントを紐づける場合

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

sample.html

style.css

index.js

出力結果

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

要素に複数のイベントを紐づける場合

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

sample.html

style.css

index.js

出力結果

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

要素にイベントデータを受け渡してイベントを紐づける場合

bind()で要素にイベントデータを受け渡してイベントを紐づける場合は第2パラメータにオブジェクトデータを指定します。

sample.html

style.css

index.js

出力結果

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

さとみさん

bind()の第2パラメータにオブジェクトデータを指定することで要素にイベントデータを受け渡してイベントを紐づけることができるんですね!

ハルトさん

そうですね。
bind()はパラメータが2つの場合と3つの場合がありますが基本的にはパラメータを2で使用する場合が多いかと思います。

複数のイベントそれぞれに個々のイベントハンドラを割り当てる場合

複数のイベントそれぞれに個々のイベントハンドラを割り当てる場合はbind()メソッドのパラメータをマップで指定します。

sample.html

style.css

index.js

出力結果

bind()メソッドのパラメータをマップで指定することで複数のイベントそれぞれに個々のイベントハンドラを割り当てることができます。
そのため、要素をクリックすると灰色になり、マウスを持っていくと黒色になり、マウスが離れると水色になります。

今回のポイント

bind()で要素にイベントを紐づける

⚫︎ 要素にイベントを紐づけるにはjQueryのbind()メソッドを使用する

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

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

⚫︎ bind()で要素にイベントデータを受け渡してイベントを紐づける場合は第2パラメータにオブジェクトデータを指定する

⚫︎ 複数のイベントそれぞれに個々のイベントハンドラを割り当てる場合はbind()メソッドのパラメータをマップで指定する

関連記事

jQueryのon()メソッドで要素にイベントを設定する方法についてはこちらをご参考ください。

Writer
壷井

壷井

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

最新の案件情報

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