本文實例分析了jQuery on()方法的用法。分享給大家供大家參考。具體分析如下：
一、jQuery on()方法的使用：
on(events,[selector],[data],fn)
events:一個或多個以空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。
selector:一個選擇器字串用於過濾器的觸發事件的選擇器元素的後代。如果選擇器為null或省略，當它到達選定的元素，事件總是觸發。
data:當一個事件被觸發時要傳遞event.data給事件處理函數。
fn:該事件被觸發時執行的函數。 false 值也可以做一個函數的簡寫，回傳false。
二、jQuery on()方法的優點：
1.提供了一種統一綁定事件的方法
2、仍然提供了.delegate()的優點，當然如果需要你也可以直接用.bind()
三、與.bind(), .live(), .delegate()的比較：
1、其實.bind(), .live(), .delegate()都是透過.on()來實現的
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
die: function( types, fn ) {
jQuery( this.context ).off( types, this.selector || "**", fn );
return this;
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
// ( namespace ) or ( selector, types [, fn] )
return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
}
2、用.bind()的代價是非常大的，它會把相同的一個事件處理程序hook到所有匹配的DOM元素上
3、不要再用.live()了，它已經不再被推薦了，而且還有許多問題
4、.delegate()會提供很好的方法來提高效率，同時我們可以加入一事件處理方法到動態新增的元素上。
5.我們可以用.on()來代替上述的3種方法
四、jQuery on()方法的使用範例
1、綁定click事件，使用off()方法移除on()所綁定的方法
2、多個事件綁定同一個函數
3、多個事件綁定不同函數
4、綁定自訂事件
5、傳遞資料到函數
$(document).ready(function(){
$("p").on("click", {msg: "You just clicked me!"}, handlerName)
});
6、適用於未建立的元素
This is a new paragraph.
").insertAfter("button");希望本文所述對大家的jQuery程式設計有所幫助。
