一. 事件委托
什么是事件委托？用現實中的理解就是：有100 個學生同時在某天中午收到快遞，但這
100 個學生不可能同時站在學校門口等，那么都會委托門衛去收取，然后再逐個交給學生。
而在jQuery 中，我們通過事件冒泡的特性，讓子元素綁定的事件冒泡到父元素(或祖先元素)
上，然后再進行相關處理即可。
如果一個企業級應用做報表處理，表格有2000 行，每一行都有一個按鈕處理。如果用
之前的.bind()處理，那么就需要綁定2000 個事件，就好比2000 個學生同時站在學校門口等
快遞，不斷會堵塞路口，還會發生各種意外。這種情況放到頁面上也是一樣，可能導致頁面
極度變慢或直接異常。而且，2000 個按鈕使用ajax 分頁的話，.bind()方法無法動態綁定尚
未存在的元素。就好比，新轉學的學生，快遞員無法驗證他的身份，就可能收不到快遞。
//HTML 部分
<div style="background:red;width:200px;height:200px;" id="box">
<input type="button" value="按鈕" class="button" />
</div>
//使用.bind()不具備動態綁定功能，只有點擊原始按鈕才能生成
$('.button').bind('click', function () {
$(this).clone().appendTo('#box');
});
//使用.live()具備動態綁定功能，jQuery1.3 使用，jQuery1.7 之后廢棄，jQuery1.9 刪除
$('.button').live('click', function () {
$(this).clone().appendTo('#box');
});
.live()原理就是把click 事件綁定到祖先元素$(document)上，而只需要給$(document)綁
定一次即可，而非2000 次。然后就可以處理后續動態加載的按鈕的單擊事件。在接受任何
事件時，$(document)對象都會檢查事件類型(event.type)和事件目標(event.target)，如果click
事件是.button，那么就執行委托給它的處理程序。.live()方法已經被刪除，無法使用了。需
要測試使用的話，需要引入向下兼容插件。
//.live()無法使用鏈接連綴調用，因為參數的特性導致
$('#box').children(0).live('click', function () {
$(this).clone().appendTo('#box');
});
在上面的例子中，我們使用了.clone()克隆。其實如果想把事件行為復制過來，我們只
需要傳遞true 即可：.clone(true)。這樣也能實現類似事件委托的功能，但原理卻截然不同。
一個是復制事件行為，一個是事件委托。而在非克隆操作下，此類功能只能使用事件委托。
$('.button').live('click', function () {
$('<input type="button" value="復制的" class="button" />').appendTo('#box');
});
當我們需要停止事件委托的時候，可以使用.die()來取消掉。
$('.button').die('click');
由於.live()和.die()在jQuery1.4.3 版本中廢棄了，之后推出語義清晰、減少冒泡傳播層次、
又支持鏈接連綴調用方式的方法：.delegate()和.undelegate()。但這個方法在jQuery1.7 版本中
被.on()方法整合替代了。
$('#box').delegate('.button', 'click', function () {
$(this).clone().appendTo('#box');
});
$('#box').undelegate('.button','click');
//支持連綴調用方式
$('div').first().delegate('.button', 'click', function () {
$(this).clone().appendTo('div:first');
});
注意：.delegate()需要指定父元素，然后第一個參數是當前元素，第二個參數是事件方
式，第三個參數是執行函數。和.bind()方法一樣，可以傳遞額外參數。.undelegate()和.unbind()
方法一樣可以直接刪除所有事件，比如：.undelegate('click')。也可以刪除命名空間的事件，
比如：.undelegate('click.abc')。
注意：.live()和.delegate()和.bind()方法一樣都是事件綁定，那么區別也很明顯，用途上
遵循兩個規則：1.在DOM 中很多元素綁定相同事件時；2.在DOM 中尚不存在即將生成的
元素綁定事件時；我們推薦使用事件委托的綁定方式，否則推薦使用.bind()的普通綁定。
二．on、off 和one
目前綁定事件和解綁的方法有三組共六個。由於這三組的共存可能會造成一定的混亂，
為此jQuery1.7 以后推出了.on()和.off()方法徹底摒棄前面三組。
//替代.bind()方式
$('.button').on('click', function () {
alert('替代.bind()');
});
//替代.bind()方式，並使用額外數據和事件對象
$('.button').on('click', {user : 'Lee'}, function (e) {
alert('替代.bind()' + e.data.user);
});
//替代.bind()方式，並綁定多個事件
$('.button').on('mouseover mouseout', function () {
alert('替代.bind()移入移出！');
});
//替代.bind()方式，以對象模式綁定多個事件
$('.button').on({
mouseover : function () {
alert('替代.bind()移入！');
},
mouseout : function () {
alert('替代.bind()移出！');
}
});
//替代.bind()方式，阻止默認行為並取消冒泡
$('form').on('submit', function () {
return false;
});
或
$('form').on('submit', false);
//替代.bind()方式，阻止默認行為
$('form').on('submit', function (e) {
e.preventDefault();
});
//替代.bind()方式，取消冒泡
$('form').on('submit', function (e) {
e.stopPropagation();
});
//替代.unbind()方式，移除事件
$('.button').off('click');
$('.button').off('click', fn);
$('.button').off('click.abc');
//替代.live()和.delegate()，事件委托
$('#box').on('click', '.button', function () {
$(this).clone().appendTo('#box');
});
//替代.die()和.undelegate()，取消事件委托
$('#box').off('click', '.button');
注意：和之前方式一樣，事件委托和取消事件委托也有各種搭配方式，比如額外數據、
命名空間等等，這里不在贅述。
不管是.bind()還是.on()，綁定事件后都不是自動移除事件的，需要通過.unbind()和.off()
來手工移除。jQuery 提供了.one()方法，綁定元素執行完畢后自動移除事件，可以方法僅觸
發一次的事件。
//類似於.bind()只觸發一次
$('.button').one('click', function () {
alert('one 僅觸發一次！');
});
//類似於.delegate()只觸發一次
$('#box).one('click', 'click', function () {
alert('one 僅觸發一次！');
});
三:例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/jquery-1.8.3.js"></script> <script> $(function () { // 動態添加的不起作用 $(".me1").click(function () { alert("jQuery click綁定事件"); }); // 動態添加的不起作用 $(".me2").bind('click', function () { alert("jQuery bind綁定事件"); }); // 動態添加的起作用， jquery 1.9on取代live $('.me3').live('click', function () { // $('.me3').on('click', function () { alert("jQuery live綁定事件."); }); $('.me4').on('click', function () { alert("jQuery on綁定事件."); }); //動態添加的不起作用 $('#live').live('click', function () { alert("事件委托"); }); }); </script> <title>Title</title> </head> <body> <input type="button" value="onclick" class="me1"> <input type="button" value="bind" class="me2"> <input type="button" value="live" class="me3"> <input type="button" value="on" class="me4"> <input type="button" value="增加標簽" class="me11" onclick="addOne()"> <div id="live"> <p>AAA</p> <p>AAA</p> <p>AAA</p> <p>AAA</p> <p>AAA</p> </div> <script> function addOne() { $('body').append($('<br/><input type="button" value="動態加的onclick不起作用" class="me1">')); $('body').append($('<input type="button" value="動態加的bind不起作用" class="me2">')); $('body').append($('<input type="button" value="動態加的live不起作用" class="me3">')); $('body').append($('<input type="button" value="動態加的on不起作用" class="me4">')); } </script> </body> </html>
結果:紅線圈的點擊可以彈框
改進:使on可以委托(js加的也起作用)
先將事件綁定到body身上再過濾到.me4(也就是事件在class為me4身上)
$('body').on('click','.me4', function () {
alert("jQuery on綁定事件.");
});
改進:on綁定多個事件並進行委托：
參數中寫多個事件，根據事件類型進行判斷(下面效果是實現hover()函數)
$("body").on("mouseover mouseout",'.el_unflod',function(event){
if(event.type == "mouseover"){
// 鼠標懸浮
alert("鼠標懸停")
}else if(event.type == "mouseout"){
// 鼠標離開
}
})
四:總結
bind:綁定事件，頁面初始化綁定，可以同時綁定多個，JS動態添加的元素不起作用。而且用unbind()去掉事件只能去掉bind綁定的事件，對於標簽種寫的onclick屬性之類的事件需要調用removeAttr刪除屬性才可以去掉事件，切記在bind事件之前去掉元素的onclick屬性等事件。
onclick: 綁定事件，頁面初始化綁定，一次綁定一個，JS動態添加的元素不起作用,bind的簡便寫法
live: 事件委托，也是事件綁定，JS動態加入的元素仍然起作用(事件委托:動態添加的元素仍然有事件)
on: 綁定事件，也是綁定事件(功能更強大),運用上述方法可以實現委托，動態添加的元素仍然有事件。
返回值:jQueryon(events,[selector],[data],fn) 概述 在選擇元素上綁定一個或多個事件的事件處理函數。 on()方法綁定事件處理程序到當前選定的jQuery對象中的元素。在jQuery 1.7中，.on()方法 提供綁定事件處理程序所需的所有功能。幫助從舊的jQuery事件方法轉換，see .bind(), .delegate(), 和 .live(). 要刪除的.on()綁定的事件，請參閱.off()。要附加一個事件，只運行一次，然后刪除自己， 請參閱.one() 參數 events,[selector],[data],fnV1.7events:一個或多個用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。 selector:一個選擇器字符串用於過濾器的觸發事件的選擇器元素的后代。如果選擇的< null或省略，當它到達選定的元素，事件總是觸發。 data:當一個事件被觸發時要傳遞event.data給事件處理函數。 fn:該事件被觸發時執行的函數。 false 值也可以做一個函數的簡寫，返回false。 events-map,[selector],[data]V1.7events-map:個用字符串表示的，一個或多個空格分隔的事件類型和可選的命名空間，值表示事件綁定的處理函數。 selector:一個選擇器字符串過濾選定的元素，該選擇器的后裔元素將調用處理程序。如果選擇是空或被忽略，當它到達選定的元素，事件總是觸發。 data:當一個事件被觸發時要傳遞event.data給事件處理函數。
參考:http://www.cnblogs.com/sooj/archive/2014/02/25/3566718.html