小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

jQuery三種事件綁定方式.bind(),.live(),.delegate()

 CevenCheng 2012-05-24

jQuery三種事件綁定方式.bind(),.live(),.delegate()

翻譯原文：http://www./blog/the-difference-between-jquerys-bind-live-and-delegate/

.bind(), .live(), 和 .delegate()之間的區(qū)別并不明顯。但是理解它們的不同之處有助于寫出更簡潔的代碼，并防止我們的交互程序中出現(xiàn)沒有預(yù)料到的bug。

基礎(chǔ)

DOM樹

首先，圖形化的HTML文檔能幫助我們更好的理解。一個簡單的HTML頁面看起來應(yīng)該像這樣

DOM tree sample

事件冒泡（也稱作事件傳遞）（Event bubbling aka event propagation）

點擊一個鏈接，觸發(fā)綁定在鏈接元素上的 click 事件，進而觸發(fā)綁定到這個元素的click事件的函數(shù)。

1
$('a').bind('click', function() { alert("That tickles!") });

　　

所以一次點擊會觸發(fā)一個alert。
trigger the alert
然后，這個 click 事件會從DOM樹向上傳遞，傳播到父元素，然后傳遞給每一個祖先元素。
event propagates up the tree

在DOM樹中， document 是根節(jié)點。
現(xiàn)在我們能容易的解釋.bind(), .live(), 和 .delegate()之間的差別了

.bind()

1
$('a').bind('click', function() { alert("That tickles!") });

　　

這是最直接的綁定方法。jQuery 掃描文檔找到所有 $(‘a(chǎn)’) 元素，然后給每一個找到的元素的 click 事件綁定處理函數(shù)。

.live()

1
$('a').live('click', function() { alert("That tickles!") });

　　

　　jQuery綁定處理函數(shù)到 $(document) 元素，并把 ‘click’ 和 ‘a(chǎn)’ 作為函數(shù)的參數(shù)。有事件冒泡到document節(jié)點的時候，檢查這個事件是不是 click 事件，target element能不能匹配 ‘a(chǎn)’ css選擇器，如果兩個條件都是true，處理函數(shù)執(zhí)行。

live方法也可以綁定到指定的元素（或者說“上下文(context)”）而不用綁定到document，比如：

1
$('a', $('#container')[0]).live(...);

　　

.delegate()

1
$('#container').delegate('a', 'click', function() { alert("That tickles!") });

　　

jQuery掃描文檔找到 $(‘#container’)，綁定處理函數(shù)到他的 click 事件，’a’ css選擇器作為函數(shù)的參數(shù)。當有事件冒泡到 $(‘#container’)，檢查事件是不是 click，并檢查target element是不是匹配css選擇器，如果兩者都符合，執(zhí)行函數(shù)。

注意這次和 .live() 方法很相似，除了把事件綁定到特定元素與跟元素的區(qū)別。精明的JS’er 或許會總結(jié)成 $(‘a(chǎn)’).live() == $(document).delegate(‘a(chǎn)’)，真的是這樣嗎？ 不，不全是。

為什么 .delegate() 比 .live() 好

jQuery 的 delegate方法比 live 方法更應(yīng)該成為首選有一個原因?？紤]以下的場景：

1
2
3
$('a').live('click', function() { blah() });
// or
$(document).delegate('a', 'click', function() { blah() });

　　

速度

上面第二個執(zhí)行比第一個快，因為第一個會遍歷整個文檔查找 $(‘a(chǎn)’) 元素，并保存為jQuery對象，但是live方法只需要傳一個字符串參數(shù)’a'而已，$() 方法并不知道我們會用鏈式表達式在后面用上.live()。

delegate 方法就只需要找到并存貯 $(document)元素就夠了。

有一種hack是在 $(document).ready()之外調(diào)用live方法，這樣就會立即執(zhí)行。這時候DOM還沒有填充，也就不會查找元素或創(chuàng)建jQuery對象。

靈活性和鏈式語法

這方面live方法依然令人費解。想一下，它鏈在$(‘a(chǎn)’)對象，但實際上是在$(document)對象起作用。因為這個原因，在鏈式表達式中使用live讓人很不安，我覺得live方法變成一個全局的jQuery方法 $.live(‘a(chǎn)’,…) 會更有意義。

只支持css選擇器

最后，live方法有一個最大的缺點，只能用css選擇器，用起來很不方便。

有關(guān)css選擇器的缺點，參看 Exploring jQuery .live() and .die()。

原作者更新

為什么使用 .live() 或 .delegate() 而不用 .bind()

最后，bind 方法看起來更清晰，更直接，是嗎？但是這里有兩個原因我們推薦 delegate 或 live:

  • 綁定事件處理函數(shù)到還不存在DOM中的元素。 bind 方法直接綁定函數(shù)到每個單獨的元素，不能綁定到還沒有添加到頁面里的元素，如果你寫了$(‘a(chǎn)’).bind(…)，然后用ajax給頁面增加了新的鏈接，新添加的鏈接不會綁定事件。live 或 delegate 或者其它綁定到祖先元素的事件，讓現(xiàn)在有的元素，或者以后增的元素都可以使用。
  • 綁定處理函數(shù)到一個元素或者少數(shù)幾個元素，監(jiān)聽后代元素，而不是綁定100個相同的處理函數(shù)到單獨的元素。這樣更有性能優(yōu)勢。

阻止冒泡

最后注意一下事件冒泡。通常我們能用這樣的方法阻止其他處理函數(shù)：

1
2
3
4
5
$('a').bind('click', function(){  
    e.preventDefault();   
    //or   
    e.stopPropagation();
})

　　

但是在這里，用 live 或 delegate 方法綁定的事件會一直傳遞到事件真正綁定的地方才會執(zhí)行。這時其他的函數(shù)已經(jīng)執(zhí)行過了。

分類: jQuery

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多