Help us understand the problem. What is going on with this article?

jQueryのbindとonの違い

More than 5 years have passed since last update.

bindとonは一緒

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

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

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

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

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

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

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

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

liveとdelegate

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

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

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

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

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

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

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

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

  • livebindと同じ書き方
    • liveをそのままonに変えてもliveの機能は使えません
  • delegateonと引数の順序が異なる
    • delegateをそのままonに変えても動きません
// live
$( "a.offsite" ).live( "click", function() {
    alert( "Goodbye!" );
});
// delegate
$( document ).delegate( "a.offsite", "click", function() {
    alert( "Goodbye!" );
});

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

// 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に書き換える必要がないんです。便利ですね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした