jQueryには bind と on という似たメソッドが存在します。
どちらも要素にイベントを紐づけるメソッドですが、実は微妙に機能が違います。
そういう訳でここではbindメソッドとonメソッドの違いについて解説
bindメソッドとonメソッドの使い方
まず初めに両者の使い方について簡単に説明します。
それぞれの使い方とコード例は次の通り
bindメソッド
これは今ある要素に対して実行したいコールバック関数を紐づけるメソッド
「今ある」というのが大事なポイントですが、それは後で詳しく説明します。
それでこの使い方ですが、次が単純なコード例
|
1 2 3 |
$('.button').bind('click', function(){ alert('Hello World'); }); |
上のコードでは button というクラスの要素にclickイベントを紐づけています。
そしてclickイベントが起きた時に bind の２つめの引数に渡したコールバックが呼ばれるわけです。
以上がbindメソッドの使い方
要素に対して直接イベントを結びつけるために使います。
onメソッド
onメソッドはセレクタにマッチする要素にイベントを紐づけるためのメソッド
こちらがbindメソッドと違うのは将来当てはまるかもしれない要素にも適用されること
どういうことかについては次で説明します。
まず on は bind と同じようにも使うことも可能です。
例えば次のように
|
1 2 3 |
$('.button').on('click', function(){ alert('Hello World'); }); |
これは先ほどの例の bind を on に置き換えただけ
この場合はonメソッドの呼び出し元の要素に直接イベントを紐づけられます。
しかしonメソッドにはもう１つ使い方があります。
それは次のようにセレクタ指定でイベントを紐づける要素を指定できること
|
1 2 3 |
$(document).on('click', '.button', function(){ alert('Hello World'); }); |
このコード内の $(document) というのは現在のドキュメント全体を表すオブジェクト
そしてonメソッドの２つめの引数には '.button' というセレクタを指定
こうすることでドキュメント内の '.button' に当てはまる要素にイベントが紐づけられます。
上のようにセレクタ指定した場合は将来当てはまる要素にも適用されます。
このように将来の要素も含まれるのがonメソッドの特徴ですね。
bindメソッドとonメソッドの違い
ではここまで説明してきたbindメソッドとonメソッドの違いは何か？
ということですが大体次のような違いがあります。
- bindメソッド
- セレクタなどが一切使えない
- 対象になるのは今ある要素にのみ
- onメソッド
- 要素指定にセレクタが使える
- 将来マッチする要素も対象になる
セレクタが使えるかどうかというのが大きな違いです。
では具体的に説明するためにコードを使って説明します。
例えば次のようなHTMLを考えてみましょう。
|
1 2 3 4 5 |
<div class="boxs"> <div class="box"></div> <div class="box"></div> </div> <button id="add_box_btn">Add box</button> |
このときboxクラスを持つdiv要素がクリックされたら（clickイベントが起きたら）背景色を変え、
またボタンがクリックされたらboxクラスを持つdiv要素を追加したいとします。
ではまず初めにbindメソッドを使ってそのようなコードを書いてみます。
そのコードは次の通り
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ /** bindメソッドでイベントを紐づけ */ $('.box').bind('click', function(){ $(this).css('background', 'lightblue'); }); $('#add_box_btn').on('click', function(){ $('.boxs').append('<div class="box"></div>'); }); }); |
先ほど説明したように bind は今ある要素のみが対象
なのでボタンから動的に追加される要素はクリックイベントの対象外になります。
実際にどう動くかは次のCodePenで試してみてください。
See the Pen 【jQuery】bindメソッドが動的追加した要素にどう働くかのコード例 by ぴー助 (@pisuke-code) on CodePen.
初めからある要素は背景が変わりますが、ボタンから追加した要素は無反応なはずです。
では次にbindメソッドの代わりにonメソッドを使ってみます。
それが次のコード
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ /** onメソッドで紐づけ */ $(document).on('click', '.box', function(){ $(this).css('background', 'lightblue'); }); $('#add_box_btn').on('click', function(){ $('.boxs').append('<div class="box"></div>'); }); }); |
onメソッドはセレクタに当てはまるなら将来の要素も対象
なのでボタンから動的に追加された要素に対してもイベントが実行されます。
実際にどのように動くかは次のCodePenで要素をクリックしてみてください。
See the Pen 【jQuery】onメソッドが動的追加した要素にどう働くかのコード例 by ぴー助 (@pisuke-code) on CodePen.
今度はボタンから追加した要素をクリックしても背景色が変わるようになりました。
以上がbindメソッドとonメソッドの違い
要するに将来の要素が対象になるかどうかの違いです。
ちなみに・・・liveメソッドについて
実はjQueryにはイベントを紐づけるメソッドがもう１つありました。
それがliveメソッドというもの
これも他と同じように要素にイベントを紐づけできます。
|
1 2 3 |
$(document).live(".button", "click", function() { alert('Hello World'); }); |
このように１番目には要素のセレクタ、２番目にイベントタイプを渡して使用
セレクタを渡せる点ではonメソッドと全く変わりません。
しかしこのliveメソッドは現在非推奨でバージョン1.9以降で削除されました。
なのでこれをイベントの紐づけに使用しないように注意してください。
必ずbindメソッドまたはonメソッドを使うようにしましょう。
ここまでのまとめ
ということでbindメソッドとonメソッドの違いまとめ
- bindメソッド
直接要素から呼び出すのでセレクタで要素指定はできない
そのため今ある要素のみが対象 - onメソッド
第二引数からセレクタで要素指定できる
そのため将来セレクタに当てはまる要素も対象
セレクタで指定できるかどうかが大きな違い
もし動的に要素を追加するなら bind ではなく on の方を使った方がいいですね。
