jQueryのbindとonの違い

bindとonは一緒

$( "body" ).on( "click", function() {
    alert( "Goodbye!" );
});

本来のJavaScriptイベントハンドラは、onclick、onblurのように頭にonをつけます。
しかし、jQueryではonを付けずに使用していますよね。

このonを使うことにより、本来のJavaScriptのようにonclickと指定しているように見えるというのは、個人的には利点だな、と思っています。

もちろん、そんな理由でbindからonに名称が変更されたというわけではありません。bindの問題点を改善して改善してできた機能を統合してできたのが、onです。オールマイティな優れものです。

とはいえ、機能が増えたことで、「引数が増えたー」「ややこしいー」と思うかもしれませんが、考え方によっては、そうでもありません。特にlive、delegateを知らない、使ったことがないという場合、bindとonの違いはないといってもあながち間違いではありません。（メモリ効率や処理速度について言及したものではないということを付け足しておきます。）

むしろonであれば、bindと同じ書き方でliveとdelegateの機能が使えると考えるほうが間違いといえます。

使用方法は簡単です。これまでbindを使っていたところをonに変えてみてください。文法を全く変えずにbindと同じ動作をさせることができます。

そして今後はonを使用しましょう。それは機能が豊富だからという理由ではありません。単にversion 1.7以降onの使用が推奨されているからです。

liveとdelegate

onを説明するうえで、必要なキーワードはbindだけではありません。他に、live、delegate、[click, change, focus...]が重要なキーワードとなります。これらの機能を合わせ持つのがonです。

ただし、live、delegateはそれぞれ非推奨や削除された機能です。

• liveは、jQuery version 1.7からdeprecated(廃止予定)、version 1.9でremoved(削除)
• delegateは、jQuery version 1.7から非推奨

最新版からjQueryを使用するなら特に覚える必要はないと思いますが、onの全容を理解するには役に立つと思います。

ここでは機能について説明は行いませんが、簡単にいうと、

• liveは動的に作成された要素にも対応可能なbind
• delegateはliveの様々な問題に対応したlive

live、delegateをonに変える際に注意すること

変更の際は以下のことに注意してください。

• liveはbindと同じ書き方
  • liveをそのままonに変えてもliveの機能は使えません
• delegateはonと引数の順序が異なる
  • delegateをそのままonに変えても動きません

// live
$( "a.offsite" ).live( "click", function() {
    alert( "Goodbye!" );
});

// delegate
$( document ).delegate( "a.offsite", "click", function() {
    alert( "Goodbye!" );
});

上記のようなliveもしくはdelegateをonにする場合、以下のようにします。(参考)

// on
$( document ).on( "click", "a.offsite", function() {
    alert( "Goodbye!" );
});

delegateの第1引数と第2引数が入れ替わった感じです。これで、onを使用した場合でもliveもしくはdelegateの機能を使うことができます。

events系メソッド(click, change, blurなど)

bindもしくはonは、以下のような書き方ができます。

$( "body" ).click( function() {
    alert( "Goodbye!" );
});

引数が少なくスッキリとした書き方です。
この書き方は、bindもしくはonと同じ動きをします。

$( "body" ).bind( "click", function() {
    alert( "Goodbye!" );
});

$( "body" ).on( "click", function() {
    alert( "Goodbye!" );
});

それでは何が違うのでしょうか。
それは実際のjQueryの定義を見るのが早いでしょう。

古いjQueryのソースから確認します。

// jQuery version 1.3.2
click: function (G){return G?this.bind(E,G):this.trigger(E)}

ただbindを呼んでいるだけでした。さて、最新版ではどうでしょうか。

// jQuery version 2.1.1
click: function (a,c){return arguments.length>0?this.on(b,null,a,c):this.trigger(b)}

なんと、ちゃんとonに変わっているではないですか。

1回余計な関数を挟むだけ、という考えもあると思いますが、ある意味これは使えます。
引数が少なくて済むし、なにより古いバージョンからこの書き方をしていたとしても、わざわざonに書き換える必要がないんです。便利ですね。