---恢復內容開始---
比較和聯系:
1.bind()函數只能針對已經存在的元素進行事件的設置；但是live(),on(),delegate()均支持未來新添加元素的事件設置；
2.bind()函數在jquery1.7版本以前比較受推崇，1.7版本出來之后，官方已經不推薦用bind()，替代函數為on(),這也是1.7版本新添加的函數，同樣，可以
用來代替live()函數，live()函數在1.9版本已經刪除；
3.live()函數和delegate()函數兩者類似，但是live()函數在執行速度，靈活性和CSS選擇器支持方面較delegate()差些，想了解具體情況，請戳這：
http://kb.cnblogs.com/page/94469/
4.bind()支持Jquery所有版本；live()支持jquery1.9-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；
推薦使用.on()方法綁定，原因有兩點：
1.on()方法可以綁定動態添加到頁面元素的事件
比如動態添加到頁面的DOM元素，用.on()方法綁定的事件不需要關心注冊該事件的元素何時被添加進來，也不需要重復綁定。有的同學可能習慣於用.bind()、.live()或.delegate()，查看源碼就會發現，它們實際上調用的都是.on()方法，並且.live()方法在jQuery1.9版本已經被移除。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
bind:
function
( types, data, fn ) {
return
this
.on( types,
null
, data, fn );
},
live:
function
( types, data, fn ) {
jQuery(
this
.context ).on( types,
this
.selector, data, fn );
return
this
;
},
delegate:
function
( selector, types, data, fn ) {
return
this
.on( types, selector, data, fn );
}
|
移除.on()綁定的事件用.off()方法。
2.on()方法綁定事件可以提升效率
很多文章都提到了利用事件冒泡和代理來提升事件綁定的效率，大多都沒列出具體的差別，所以為了求證，我做一個小測試。
假設頁面添加了5000個li，用chrome開發者工具Profiles測試頁面載入時間。
(事件冒泡參考 http://www.cnblogs.com/webflash/archive/2009/08/23/1552462.html)
普通
|
1
2
3
|
$(
'li'
).click(
function
(){
console.log(
this
)
});
|
綁定過程的執行時間
普通綁定相當於在5000li上面分別注冊click事件，內存占用約4.2M，綁定時間約為72ms。
.on()綁定
|
1
2
3
|
$(document).on(
'click'
,
'li'
,
function
(){
console.log(
this
)
})
|
綁定過程的執行時間
.on()綁定利用事件代理，只在document上注冊了一個click事件，內存占用約2.2M，綁定時間約為1ms。
多個事件綁定同一個函數
$(document).ready(function(){
$("p").on("mouseover mouseout",function(){
$("p").toggleClass("intro");
});
});
多個事件綁定不同函數
$(document).ready(function(){
$("p").on({
mouseover:function(){$("body").css("background-color","lightgray");},
mouseout:function(){$("body").css("background-color","lightblue");},
click:function(){$("body").css("background-color","yellow");}
});
});
用on()方法綁定多個選擇器，多個事件則可以這樣寫：
$(document).on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
click: function() {
// Handle click...
}
}, '#header .fixed-feedback-bn, #sb-sec .feedback-bn');
綁定自定義事件
$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName + "! What a beautiful name!").show();
});
$("button").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});
傳遞數據到函數
function handlerName(event)
{
alert(event.data.msg);
}
$(document).ready(function(){
$("p").on("click", {msg: "You just clicked me!"}, handlerName)
});
適用於未創建的元素
$(document).ready(function(){
$("div").on("click","p",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>This is a new paragraph.</p>").insertAfter("button");
});
});
tip:如果你需要移除on()所綁定的方法，可以使用off()方法處理。
$(document).ready(function(){
$("p").on("click",function(){
$(this).css("background-color","pink");
});
$("button").click(function(){
$("p").off("click");
});
});
在需要為較多的元素綁定事件的時候，優先考慮事件委托，可以帶來性能上的好處。將click事件綁定在document對象上，頁面上任何元素發生的click事件都冒泡到document對象上得到處理。
---恢復內容結束---