快捷導(dǎo)航

讀jQuery之十二刪除事件核心方法

更新時(shí)間：2011年07月31日 22:19:36 作者：

使用jQuery刪除事件（或稱解除事件綁定）有三個(gè)函數(shù)：unbind、die和undelegate。這三個(gè)方法都依賴于未公開的jQuery.event.remove（后續(xù)使用.remove簡寫）。此為刪除事件的核心方法。

.remove 所作的事情與上一篇提到的.add 剛好相反。且與.add中的處理代碼一一對應(yīng)，即 .add 中有多少種添加事件的方式.remove就有對應(yīng)的刪除方式。

.remove 定義了四個(gè)參數(shù) elem, types, handler, pos 。從字面上看四個(gè)參數(shù)的意義很明了

elem 為HTMLElement

types 為String類型，事件名稱如'click'或'mouseover mouseout'

handler 為Function類型，事件回調(diào)函數(shù)

pos 為Number類型，指定數(shù)組位置

但.remove內(nèi)部沒這么簡單，如
1，handler 有時(shí)會(huì)傳布爾類型false，這時(shí)會(huì)把handler賦值為另一個(gè)函數(shù)（此處的處理同.add）。

復(fù)制代碼代碼如下:

 
if ( handler === false ) { 
handler = returnFalse; 
} 

2， types 有時(shí)會(huì)為一個(gè)對象，這時(shí)真正的handler是types.handler，types是types.type。

復(fù)制代碼代碼如下:

 
// types is actually an event object here 
if ( types && types.type ) { 
handler = types.handler; 
types = types.type; 
} 

我們知道變量命名要具有意義，名副其實(shí)而避免誤導(dǎo)。從這個(gè)意義上講，jQuery中存在大量這樣的寫法，一個(gè)變量往往具有多種含義，晦澀難讀。如這里的types，應(yīng)該是String類型，但實(shí)際內(nèi)部對typeos為Object類型也做了處理。這是JS沒有類型檢查的原因?qū)е隆７催^來講這種語言會(huì)比較靈活，jQuery才如此緊湊，內(nèi)聚。
閑言少敘，看看.remove方法都做了哪些事。
1、當(dāng)只傳elem時(shí)，會(huì)將elem上添加的所有事件都刪除。如$('#id').unbind()
2、當(dāng)types為String，且以點(diǎn)號(hào)（.）開頭時(shí)將刪除該命名空間下的事件。如$('#id').unbind('.name')。會(huì)把添加click.name，mouseover.name等都刪除。
對應(yīng)的代碼如下

復(fù)制代碼代碼如下:

 
// Unbind all events for the element 
if ( !types || typeof types === "string" && types.charAt(0) === "." ) { 
types = types || ""; 
for ( type in events ) { 
jQuery.event.remove( elem, type + types ); 
} 
return; 
} 

我們發(fā)現(xiàn)for in中是個(gè)遞歸調(diào)用。
如果這么調(diào)用
jQuery.event.remove(el, 'click', fn)
那么是不會(huì)走上面的遞歸的，而是直接進(jìn)入了while循環(huán)

復(fù)制代碼代碼如下:

 
while ( (type = types[ i++ ]) ) { 
... 
} 

這是標(biāo)準(zhǔn)的刪除事件的流程。大概步驟如下
1、判斷事件名稱是否具有命名空間（以點(diǎn)號(hào)區(qū)分），如果沒有命名空間則刪除該事件名稱下的所有事件。否則只刪除命名空間的某事件。
2、取得事件數(shù)組（eventType = events[ type ]），如果沒有傳handler則表示刪除該類型事件的所有hanlder，否則只刪除該事件類型的指定handler。
3、對特殊事件（如live）的處理
4、最后對elemData進(jìn)行處理，如果events為空對象則刪除elemData的events和handle屬性。如

復(fù)制代碼代碼如下:

 
// Remove the expando if it's no longer used 
if ( jQuery.isEmptyObject( events ) ) { 
var handle = elemData.handle; 
if ( handle ) { 
handle.elem = null; 
} 
delete elemData.events; 
delete elemData.handle; 
if ( jQuery.isEmptyObject( elemData ) ) { 
jQuery.removeData( elem, undefined, true ); 
} 
} 

jQuery事件管理數(shù)據(jù)結(jié)構(gòu)圖：