jquery .bind() vs .live() vs .delegate() vs .on()

baukh789 發布于2019-08-20 17:23 / 1576人閱讀

摘要：但是當我們點擊新添加的元素也就是時，卻沒有把這個加給它。它的原理是利用事件冒泡最終代理給最頂層的。對于動態生成的元素也生效因為其實是綁定在上的。

假設我們有這樣一段html：


    book 1
    book 2

1: .bind()
.bind方法的用法是這樣的：targetElment.bind("eventType", eventHandler)
所以假入我們要給

元素綁定一個click事件，那就這樣寫：

$(document).ready(function(){
    $(".bookList li").bind("click", function(event){
        $(this).addClass("red");
    })
    
    $("button").bind("click", function(event){
        $(".bookList").append("book 3");

    })
})

最開始只有兩個

元素，點擊

的時候會往當前被點擊的

上面添加一個名為‘red’的class。通過點擊‘add a li’這個button, 添加一個新的

元素。但是當我們點擊新添加的

元素（也就是"book 3"）時，卻沒有把"red"這個class加給它。所以可以看到bind()有的缺點是：

1: 對于動態添加的元素不會綁定事件
2: 它會給每一個滿足條件的dom元素都綁定這個eventHandler
3: 它會帶來性能問題
4: 對應解綁方法為：.unbind()

2: .live()
.live方法的用法是這樣的：targetElment.live("eventType", eventHandler)
live()的寫法和bind是一樣，但是它們的功能和實現原理卻不一樣，不同點有：

1: live()把eventHandler綁定在document上，而不是某個特定的元素節點上。它的原理是利用事件冒泡最終代理給最頂層的document。
2: 對于動態生成的元素也生效（因為eventHandler其實是綁定在document上的）。
3: jQuery 1.7之后live()就被廢棄了，用.on()替代
4: 對應的解綁方法為 .die()

3: .delegate()
.delegate方法的用法是這樣的：delegatedObject.delegate("targetElment","eventType", eventHandler)
比方說仍然針對我們開頭的那段代碼，我們把對

的點擊事件，委托給它的父節點

$(".bookList").delegate(".bookList li","click", function(event){
        $(this).addClass("red");
 })

.delegate()和live()都用了事件的委托，不用之處在于：

1: delegate()可以自己選擇委托給特定的元素，而不是只能是document
2: jQuery 1.7之后.delegate()也被廢棄了，要用.on()替換
3: 對應的解綁方法為 .undelegate()

4: .on()
.on()的語法：delegateObject.on("eventType", "targetElement", eventHandler)
jQuery 1.7之后，上面的三個方法都被on取而代之，而用on的不同寫法就可以達到跟它們相同的效果：

// Bind
$( ".bookList li" ).bind( "click", function( e ) {} ); 
$( ".bookList li" ).on( "click", function( e ) {} ); 

// Live
$( ".bookList li" ).live( "click", function( e ) {} );
$( document ).on( "click", ".bookList li", function( e ) {} ); 

// Delegate
$( "#bookList" ).delegate( "li", "click", function( e ) {} );
$( ".bookList" ).on( "click", "li", function( e ) {} );

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83555.html

[譯] Jquery中 .bind() .live() .delegate() 和 .on() 之間

摘要：方法將事件類型和一個事件處理函數直接注冊到了被選中的元素中。方法將與事件處理函數關聯的選擇器和事件信息一起附加到文檔的根級元素即。通過將事件信息注冊到上，這個事件處理函數將允許所有冒泡到的事件調用它例如委托型傳播型事件。簡介我了解到很多網頁開發者對jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。這些疑惑通常是關于它們之間...

terasum 2019-08-20 18:27 評論0 收藏0
jquery 給動態添加元素實現點擊事件

摘要：方法用到了事件委托的概念來處理事件的綁定。可以用在動態添加的元素上缺點需要查找那個那個元素上發生了那個事件了，盡管比少很多了，不過，你還是得浪費時間來查找。當我們試圖綁定一些事件到DOM元素上的時候，通常會使用以下的四個方法bind(),on(),live(),delegate()大家應該用的較多的是前兩種方法。下面是我對四種方法的理解： Bind()： .bind()是最直接的綁定...

DataPipeline 2019-08-22 17:30 評論0 收藏0
深入理解JQuery中的on方法（事件委派機制）

摘要：它是一個過濾器的作用，只有被選中元素的后代元素才會觸發事件。替換是引入的，目的是通過祖先元素來代理委派后代元素的事件綁定問題，某種程度上和優點相似。相關資料深入理解新的綁定事件機制方法的使用新的事件綁定機制前言在開發項目的時候，JQuery的使用極其廣泛，如果腦海中沒有一點JQuery的基礎知識，隨性編寫，那么就有可能造成bug問題。JQuery 1.4版本之后新增了on方法，這個...

ckllj 2019-06-27 14:17 評論0 收藏0
深入理解JQuery中的on方法（事件委派機制）

摘要：它是一個過濾器的作用，只有被選中元素的后代元素才會觸發事件。替換是引入的，目的是通過祖先元素來代理委派后代元素的事件綁定問題，某種程度上和優點相似。相關資料深入理解新的綁定事件機制方法的使用新的事件綁定機制前言在開發項目的時候，JQuery的使用極其廣泛，如果腦海中沒有一點JQuery的基礎知識，隨性編寫，那么就有可能造成bug問題。JQuery 1.4版本之后新增了on方法，這個...

jindong 2019-08-20 10:22 評論0 收藏0
深入理解JQuery中的on方法（事件委派機制）

摘要：它是一個過濾器的作用，只有被選中元素的后代元素才會觸發事件。替換是引入的，目的是通過祖先元素來代理委派后代元素的事件綁定問題，某種程度上和優點相似。相關資料深入理解新的綁定事件機制方法的使用新的事件綁定機制前言在開發項目的時候，JQuery的使用極其廣泛，如果腦海中沒有一點JQuery的基礎知識，隨性編寫，那么就有可能造成bug問題。JQuery 1.4版本之后新增了on方法，這個...

ralap 2019-08-14 14:30 評論0 收藏0