jQuery 高級事件（事件委託）

時間 2019-11-12

標籤 jquery 高級事件委託欄目 JQuery 简体版

原文原文鏈接

這個方法是基本是的 .bind() 方法的一個變體。使用 .bind() 時，選擇器匹配的元素會附加一個事件處理函數，而之後再添加的元素則不會有。爲此須要再使用一次 .bind() 才行。好比說ajax

<body>app

<div class="clickme">Click here</div>函數

</body> 測試

能夠給這個元素綁定一個簡單的click事件：this

$('.clickme').bind('click', function() {spa

alert("Bound handler called.");插件

}); 對象

當點擊了元素，就會彈出一個警告框。而後，想象一下這以後有另外一個元素添加進來了。事件

$('body').append('<div class="clickme">Another target</div>'); get

儘管這個新的元素也可以匹配選擇器 ".clickme" ，可是因爲這個元素是在調用 .bind() 以後添加的，因此點擊這個元素不會有任何效果。

.live() 就提供了對應這種狀況的方法。若是咱們是這樣綁定click事件的：

$('.clickme').live('click', function() {

alert("Live handler called.");

});

而後再添加一個新元素：

$('body').append('<div class="clickme">Another target</div>');

而後再點擊新增的元素，他依然可以觸發事件處理函數。

什麼是事件委託？用現實中的理解就是：有 100 個學生同時在某天中午收到快遞，但這 100 個學生不可能同時站在學校門口等，那麼都會委託門衛去收取，而後再逐個交給學生。而在 jQuery 中，咱們經過事件冒泡的特性，讓子元素綁定的事件冒泡到父元素(或祖先元素) 上，而後再進行相關處理便可。

若是一個企業級應用作報表處理，表格有 2000 行，每一行都有一個按鈕處理。若是用以前的.bind()處理，那麼就須要綁定 2000 個事件，就比如 2000 個學生同時站在學校門口等快遞，不斷會堵塞路口，還會發生各類意外。這種狀況放到頁面上也是同樣，可能致使頁面極度變慢或直接異常。並且，2000 個按鈕使用 ajax 分頁的話，.bind()方法沒法動態綁定還沒有存在的元素。就比如，新轉學的學生，快遞員沒法驗證他的身份，就可能收不到快遞。

//HTML 部分

</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()的普通綁定。