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

baukh789 發(fā)布于2019-08-20 17:23 / 1574人閱讀

摘要：但是當(dāng)我們點(diǎn)擊新添加的元素也就是時(shí)，卻沒(méi)有把這個(gè)加給它。它的原理是利用事件冒泡最終代理給最頂層的。對(duì)于動(dòng)態(tài)生成的元素也生效因?yàn)槠鋵?shí)是綁定在上的。

假設(shè)我們有這樣一段html：


    book 1
    book 2

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

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

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

    })
})

最開(kāi)始只有兩個(gè)

元素，點(diǎn)擊

的時(shí)候會(huì)往當(dāng)前被點(diǎn)擊的

上面添加一個(gè)名為‘red’的class。通過(guò)點(diǎn)擊‘a(chǎn)dd a li’這個(gè)button, 添加一個(gè)新的

元素。但是當(dāng)我們點(diǎn)擊新添加的

元素（也就是"book 3"）時(shí)，卻沒(méi)有把"red"這個(gè)class加給它。所以可以看到bind()有的缺點(diǎn)是：

1: 對(duì)于動(dòng)態(tài)添加的元素不會(huì)綁定事件
2: 它會(huì)給每一個(gè)滿足條件的dom元素都綁定這個(gè)eventHandler
3: 它會(huì)帶來(lái)性能問(wèn)題
4: 對(duì)應(yīng)解綁方法為：.unbind()

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

1: live()把eventHandler綁定在document上，而不是某個(gè)特定的元素節(jié)點(diǎn)上。它的原理是利用事件冒泡最終代理給最頂層的document。
2: 對(duì)于動(dòng)態(tài)生成的元素也生效（因?yàn)閑ventHandler其實(shí)是綁定在document上的）。
3: jQuery 1.7之后live()就被廢棄了，用.on()替代
4: 對(duì)應(yīng)的解綁方法為 .die()

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

的點(diǎn)擊事件，委托給它的父節(jié)點(diǎn)

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

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

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

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

// 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 ) {} );