關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 356395

    累積人氣

  • 26

    今日人氣

    3

    追蹤人氣

The Difference Between jQuery's .bind(), .live(), delegate() and on()

$('button').bind('click', function(){
    alert('你用bind綁定法呼叫了我');
});

這時我要驗證 bind() 只能用在既存的 elem 元件上,因此請你按這裡來動態新增一個 button 然後再按它看看……你會發現新生的按鈕按下去沒反應,那是因為我們用的是 bind()

live()

live() 最早出現於 jQuery v1.3, 它的特色是綁定於整份文件的根目錄 document root (也是缺點,之後補述)。

接著我們要來改寫範例,但是使用 live() 來操作

$('button').live('click', function(){
    alert('你用live綁定法呼叫了我');
});

接著,同樣按這裡來動態新增一個 button 然後再按按看,你會發現結果應該不同 :)
不管新增了多少個 button,它都會被立即綁定住我們定義的 event,這個方式很好用,但……物極必反,太好用的東西會有反效果,如前述使用 live() 其實是會 bubble 一路往上層跑,綁定在 root 再尋找所有指定的 selector(elem),若使用不慎,或用太多,容易造成整體網頁的效能影響,eg:$('a').live()……

因此,live() 方式在 jQuery v1.7 被列入不建議使用(deprecated) 在 jQuery v1.9 時被正式移除(removed)

delegate()

第一次在 jQuery v1.42 出現,但用法與傳統的 event binding 語法有所不同,已習慣舊語法的 jQuery User 不太容易習慣,它的好處是解決了 live() 的缺點(指到:root);取而代之,除了要綁定的 elem 之外,也要指定它的 parent

Sample

$('#parent').delegate('button','click', function(){
    // 只有在 #parent 底下的 button 才會被綁定 click event
    alert('叫我嗎? 我是parent的孩子?');
});
on()

第一次出現在 jQuery v1.7 也是目前最新 jQuery 用來綁 elem events 的使用方式,他結合了前述三種方式的特長,削去了缺點,更直覺的語意。

綁定在既有的 dom elem

$('button').on('click', function(){
    // do what you want
});

限定綁定

只有在 #parent 底下的 li 才會被 bind click event

$('#parent').on('click', 'li', function(){
    // do what you want 
});

注意,雖然和舊的 delegate 一樣都是限定綁定,但它的語法順序稍有不同

在同一個區域底下一次綁定複數的 events 在不同的 elems (chain binding)

$('#zone')
    .on('click', 'button', function(){
        $(this).text('clicked');
    })
    .on('mouseenter', function(){
        // 移進 #zone 時改變 bg-color
        $(this).css('backgroundColor', '#E0E0E0');
    })
    .on('focus', 'input[type=text]', function(){
        // 在 #zone 裡的 input:text focus 時...
        $(this).attr('placeholder','trigger focus');
    });

接者你可能會問,如果我在 #zone 裡的 elem 也是動態產生的,那麼使用 on() 綁定好的 events 是否會像 live() 一樣被正常觸發?

那麼就來試試吧

生一個 Button 到 #zone; 清除所有複製的 button

測試結果:若是想承習舊版的 live() 效果,那麼前提是要使用似乎 delegate() 的寫法;意思是 $('parent').on('event', 'elem', function(){ ... }); 才能讓動態產生的 elem 也被附予先前已定義好的 event。

換而言之 $(elem).on('click');這樣的寫法也只能像 bind() 一樣,只綁在既有的 dom 元件上面囉。

結語

若您使用最新的 jQuery 版本,那麼用 on() 來綁定 event 是絕對不會出錯的,但若專案已舊,舊版本的 jQuery 無法輕易 upgrade (怕會大爆炸),那麼就要小心注意自己使用的 jQuery 來選擇 dom element 的 event 綁定方式了,以上簡單搭配實例的介紹碎碎念結束。

參考來源

jQuery官網

註:event 有很多,除了常用的點擊(click), 移上(mouseover), 移出(mouseout), 輸入表單用的 focus, blur 等等……詳細請參考 這裡

相簿設定
標籤設定
相簿狀態