javascript事件委託和jQuery事件綁定on、off 和one

一. 事件委託
什麼是事件委託？用現實中的理解就是：有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 僅觸發一次！');
});

 

三. 事件委託舉例：

html代碼：

<div>
<input id="a" type="button" value="按鈕1">
<input id="a" type="button" value="按鈕2">
</div>

jQuery代碼：

$('div').click(function(e){
alert('事件類型：'+ e.type + '，Value：' + $(e.target).val());
})

點擊【按鈕1】，彈出：   事件類型：click，Value：按鈕1。

注：e.type返回對象的事件類型，如click、mousedown；e.target返回觸發事件的jQuery對象。

 

四. 推薦一個javascript在線測試工具，支持選擇JQuery庫，能夠測試html、css、js代碼

http://jsfiddle.net