jQueryのbindメソッドとonメソッドの違いについてコード例で解説

jQueryには bind  と on  という似たメソッドが存在します。

どちらも要素にイベントを紐づけるメソッドですが、実は微妙に機能が違います。

そういう訳でここではbindメソッドとonメソッドの違いについて解説

bindメソッドとonメソッドの使い方

まず初めに両者の使い方について簡単に説明します。

それぞれの使い方とコード例は次の通り

bindメソッド

これは今ある要素に対して実行したいコールバック関数を紐づけるメソッド

今ある」というのが大事なポイントですが、それは後で詳しく説明します。

 

それでこの使い方ですが、次が単純なコード例

上のコードでは button  というクラスの要素にclickイベントを紐づけています。

そしてclickイベントが起きた時に bind  の2つめの引数に渡したコールバックが呼ばれるわけです。

 

以上がbindメソッドの使い方

要素に対して直接イベントを結びつけるために使います。

onメソッド

onメソッドはセレクタにマッチする要素にイベントを紐づけるためのメソッド

こちらがbindメソッドと違うのは将来当てはまるかもしれない要素にも適用されること

どういうことかについては次で説明します。

 

まず on  は bind  と同じようにも使うことも可能です。

例えば次のように

これは先ほどの例の bind  を on  に置き換えただけ

この場合はonメソッドの呼び出し元の要素に直接イベントを紐づけられます。

 

しかしonメソッドにはもう1つ使い方があります。

それは次のようにセレクタ指定でイベントを紐づける要素を指定できること

このコード内の $(document)  というのは現在のドキュメント全体を表すオブジェクト

そしてonメソッドの2つめの引数には '.button'  というセレクタを指定

こうすることでドキュメント内の '.button'  に当てはまる要素にイベントが紐づけられます。

 

上のようにセレクタ指定した場合は将来当てはまる要素にも適用されます。

このように将来の要素も含まれるのがonメソッドの特徴ですね。

bindメソッドとonメソッドの違い

ではここまで説明してきたbindメソッドとonメソッドの違いは何か?

ということですが大体次のような違いがあります。

  • bindメソッド
    • セレクタなどが一切使えない
    • 対象になるのは今ある要素にのみ
  • onメソッド
    • 要素指定にセレクタが使える
    • 将来マッチする要素も対象になる

セレクタが使えるかどうかというのが大きな違いです。

 

では具体的に説明するためにコードを使って説明します。

例えば次のようなHTMLを考えてみましょう。

このときboxクラスを持つdiv要素がクリックされたら(clickイベントが起きたら)背景色を変え、

またボタンがクリックされたらboxクラスを持つdiv要素を追加したいとします。

 

ではまず初めにbindメソッドを使ってそのようなコードを書いてみます。

そのコードは次の通り

先ほど説明したように bind  は今ある要素のみが対象

なのでボタンから動的に追加される要素はクリックイベントの対象外になります。

実際にどう動くかは次のCodePenで試してみてください。

See the Pen 【jQuery】bindメソッドが動的追加した要素にどう働くかのコード例 by ぴー助 (@pisuke-code) on CodePen.

初めからある要素は背景が変わりますが、ボタンから追加した要素は無反応なはずです。

 

では次にbindメソッドの代わりにonメソッドを使ってみます。

それが次のコード

onメソッドはセレクタに当てはまるなら将来の要素も対象

なのでボタンから動的に追加された要素に対してもイベントが実行されます。

実際にどのように動くかは次のCodePenで要素をクリックしてみてください。

See the Pen 【jQuery】onメソッドが動的追加した要素にどう働くかのコード例 by ぴー助 (@pisuke-code) on CodePen.

今度はボタンから追加した要素をクリックしても背景色が変わるようになりました。

 

以上がbindメソッドとonメソッドの違い

要するに将来の要素が対象になるかどうかの違いです。

ちなみに・・・liveメソッドについて

実はjQueryにはイベントを紐づけるメソッドがもう1つありました。

それがliveメソッドというもの

 

これも他と同じように要素にイベントを紐づけできます。

このように1番目には要素のセレクタ、2番目にイベントタイプを渡して使用

セレクタを渡せる点ではonメソッドと全く変わりません。

 

しかしこのliveメソッドは現在非推奨でバージョン1.9以降で削除されました。

なのでこれをイベントの紐づけに使用しないように注意してください。

必ずbindメソッドまたはonメソッドを使うようにしましょう。

ここまでのまとめ

ということでbindメソッドとonメソッドの違いまとめ

  • bindメソッド
    直接要素から呼び出すのでセレクタで要素指定はできない
    そのため今ある要素のみが対象
  • onメソッド
    第二引数からセレクタで要素指定できる
    そのため将来セレクタに当てはまる要素も対象

セレクタで指定できるかどうかが大きな違い

もし動的に要素を追加するなら bind  ではなく on  の方を使った方がいいですね。