jQuery 便利なonを使おう（on click)

対象者

click()とon('click', function())の違いが分からない人。
click()しか使ったことのない人。
何も考えずにon('click', function())を使っている人。

onの有用性

クリックイベントを書くとき

$('p').click(function(){
     hogehoge;
});

のような記述が出来る。

はたまた、

$('p').on('click',function(){
     hogehoge;
});

とも記述できる。

果たして、onは何が良いのか。
＊＊＊＊＊＊
onの有用性
1.追加要素へのイベント（さまざまなイベントへの汎用性）
2.複数のイベント
＊＊＊＊＊

※onはjQuery1.7以降

1.さまざまなイベントへの汎用性

onはbind、live、delegateを統合したものである。

bind

ー基本的なイベントの設定

$('p').bind('click',function(){
     hogehoge;
});
$('p').unbind('click');

★onで書くと…

$('p').on('click',function(){
     hogehoge;
});
$('p').off('click');

live

ー後から追加した要素にもイベントを実行させる（documentにイベント設定）

$('p').live('click',function(){
     hogehoge;
});
$('p').die('click');

★onで書くと…

$(document).on('click','p',function(){
     hogehoge;
});
$(document).off('click','p');

delegate

ー後から追加した要素にもイベントを実行させる(親要素にイベント設定）

$('p').delegate('a','click',function(){
     hogehoge;
});
$('p').undelegate('a','click');

★onで書くと…

$('p').on('click','a',function(){
     hogehoge;
});
$('p').off('click','a');

liveとdelegeteって何をしているの？

例えば、bindを使うときは、ページを表示時に既に存在する要素に対してイベントを設定する。そのため、後に追加した要素にはイベントが設定出来ない。
それを解決するのが、live、delegate。この２つは、イベントを指定したい要素に直接設定するのではなく、親要素を使って間接的にイベントを設定する。
例えば、下記のように<a></a>の要素を追加したとすると、
<p></p>
↓
<p><a></a></p>

$('a').bind('click',function(){
     hogehoge;
});

とbindで記述してもクリックイベントは実行出来ない。ここで、

$('p').delegate('a','click',function(){
     hogehoge;
});

と親要素のpにイベントを設定することで間接的にイベントを設定することが出来る。
つまり、pに「中身のaにはクリックイベントをつける」というイベントを設定しているわけ。

liveはdelegateの親要素をdocumentと設定しているだけ。
つまり

$('a').live('click',function(){ …

と

$(document).delegate('click',function(){ …

は一緒。

###liveとdelegateって何が違うの？
delegateの中にliveが含まれると考えればオーケー。
liveは後で追加した要素にイベントを付与するとき手軽に(bind と同じ間隔で)イベントを実行出来る。
では、なんでdelegateがあるのかというと、実行速度が速いのです。
liveは内部でdelegateを実行しているわけで、一手多いのです。

参考

実行順　bind→delegate→live
実行速度　delegate→live→bind　(意識するほどの差はない）

※live、dieはjQuery1.9で廃止

2.複数のイベント

onで複数のイベントを設定する

・同じ処理をする

$('.foo').on('click blur', function(){...});

ースペース区切りでオーケー。

・別々の処理をする複数イベント

$('.foo').on({
'mouseenter': function(){...},
'mouseleave': function(){...}
});

・イベントデリゲートで複数イベントを設定する

$('.parent').on({
'mouseenter': function(){...},
'mouseleave': function(){...}
}, '.foo');

結論

結論、onはbind、live、delegateのいいとこ取りです、onを使いましょう。

参考URL
jQuery の on() と off() を理解する
bindとlive, delegateの違い。そしてon。
clickとbindとliveとdelegateとonの違い