JQueryイベントバインド関数:on()とbind()の違い

JQueryは1.7+バージョンから、on()とoff()を提供し、イベント処理関数のバインドとキャンセルを行います.この2つのAPIはJQueryが最初に提供したbind()とunbind()と似たような点が多く,いくつかの違いもある.bindとunbindの詳細は、この文章を参考にすることができます.
 
on()とbind()の関数署名は以下の通りです.

bind(type, [data], fn)

on(type,[selector],[data],fn)

2つの関数の違いは、selectorというパラメータ値がサポートされているかどうかです.Javascriptのイベントバブル特性のため、親要素にイベント処理関数を登録すると、子要素にこのイベントが発生すると、親要素のイベント処理関数もトリガーされます.onを使用する場合、selectorを設定しないと、onとbindは区別されません.
 

<div id="parent">
	<input type="button" value="a" id="a"/>
	<input type="button" value="b" id="b"/>
</div>

上記のコードでは、bind()を使用してparentにclickイベント処理関数をバインドすると、aまたはbボタンをクリックすると、イベント処理関数が実行されます.aをクリックしたときにトリガーし、bをクリックしたときにトリガーしない場合は、onを使用します.コードは以下の通りです.

$("#parent").on("click","#a",function(){
	alert($(this).attr("id"));
});

 
on()関数のパラメータselectorは、イベントがバブルしたときに親要素が子要素で発生したイベントをフィルタリングできるようにするためであることがわかります.bindを使用すると、この能力がなく、サブエレメントで発生したイベントが親エレメントイベントをトリガーします.
 
もう一つ注意しなければならないのは、onバインドのイベント処理関数は、将来追加される要素と同じように可能であり、delegateと同じ効果であり、bindはだめである.