jQuery中的.bind()、.live()和.delegate()之間區別分析,學習jquery的朋友可以參考下
$('a').bind('click',function(){alert('that tickles!')})
.bind()
這是最簡單的綁定方法了。JQuery掃描文檔找出所有的$(‘a')元素,並把alert函數綁定到每個元素的click事件上。
.live()
JQuery把alert函數綁定到$(document)元素上,並使用'click'和'a'作爲參數。任何時候只要有事件冒泡到document節點上,它就查看該事件是否是一個click事件,以及該事件的目標元素與'a'這一CSS選擇器是否匹配,如果都是的話,則執行函數。
live方法還可以被綁定到具體的元素(或“context”)而不是document上,像這樣:
.delegate()
JQuery掃描文檔查找$('#container'),並使用click事件和'a'這一CSS選擇器作爲參數把alert函數綁定到$('#container')上。任何時候只要有事件冒泡到$('#container')上,它就查看該事件是否是click事件,以及該事件的目標元素是否與CSS選擇器相匹配。如果兩種檢查的結果都爲真的話,它就執行函數。
可以注意到,這一過程與.live()類似,但是其把處理程序綁定到具體的元素而非document這一根上。精明的JS'er們可能會做出這樣的結論,即$('a').live() == $(document).delegate('a'),是這樣嗎?嗯,不,不完全是。
爲什麼.delegate()要比.live()好用
基於幾個原因,人們通常更願意選用jQuery的delegate方法而不是live方法。考慮下面的例子:
或
$(document).delegate('a', 'click', function() { blah() });
後者實際上要快過前者,因爲前者首先要掃描整個的文檔查找所有的$(‘a')元素,把它們存成jQuery對象。儘管live函數僅需要把'a'作爲串參數傳遞以用做之後的判斷,但是$()函數並未“知道”被鏈接的方法將會是.live()。
而另一方面,delegate方法僅需要查找並存儲$(document)元素。
一種尋求避開這一問題的方法是調用在$(document).ready()之外綁定的live,這樣它就會立即執行。在這種方式下,其會在DOM獲得填充之前運行,因此就不會查找元素或是創建jQuery對象了。
$('a').bind('click',function(e){
e.preventDefault()
e.stopPropagation()}
)
不過,當我們使用live或是delegate方法的時候,處理函數實際上並沒有在運行,需要等到事件冒泡到處理程序實際綁定的元素上時函數纔會運行。而到此時爲止,我們的其他的來自.bind()的處理函數早已運行了。