jQuery中bind,live,delegate,on綁定事件的方式與區別


jQuery中提供了四種事件監聽方式,分別是bind、live、delegate、on,對應的解除監聽的函數分別是unbind、die、undelegate、off。

已知有4個列表元素:

  列表元素1

 

  列表元素2

 

  列表元素3

 

   列表元素4

 

  1、bind

bind(type,[data],function(eventObject))

bind是使用頻率較高的一種,作用就是在選擇到的元素上綁定特定事件類型的監聽函數,參數的含義如下:

type:事件類型,如click、change、mouseover等;

data:傳入監聽函數的參數,通過event.data取到。可選;

function:監聽函數,可傳入event對象,這里的event是jQuery封裝的event對象,與原生的event對象有區別,使用時需要注意。

  源碼:

bind: function( types, data, fn ) {

return this.on( types, null, data, fn );

}

  可以看到內部是調用了on方法。

  bind的特點就是會把監聽器綁定到目標元素上,有一個綁一個,在頁面上的元素不會動態添加的時候使用它沒什么問題。但如果列表中動態增加一個“列表元素5”,點擊它是沒有反應的,必須再bind一次才行。

  

  2、live

live(type, [data], fn)

live的參數和bind一樣,它又有什么蹊蹺呢,我們還是先瞄一眼源碼:

live: function( types, data, fn ) {

jQuery( this.context ).on( types, this.selector, data, fn );

return this;

}

可以看到live方法並沒有將監聽器綁定到自己(this)身上,而是綁定到了this.context上了。

live正是利用了事件委托機制來完成事件的監聽處理,把節點的處理委托給了document。

使用事件委托的優點一目了然,新添加的元素不必再綁定一次監聽器。

 

  3、delegate

將監聽事件綁定在就近的父級元素上,源碼:

delegate: function( selector, types, data, fn ) {

return this.on( types, selector, data, fn );

}

這下,我們的選擇又多了一些靈活性,不單可以利用事件委托,還可以選擇委托的對象。畢竟老麻煩同一個人幫忙很不好嘛。對於如何選擇委托對象,還是需要一定的策略的,畢竟父級元素可以有很多。我覺得原則應該是選擇最近的“穩定”元素,選擇最近是因為事件可以更快的冒泡上去,能夠在第一時間進行處理。所謂“穩定”是指該父級元素是一開始就在頁面上的,不是動態添加上來的,而且將來也不會消失掉,這樣可以保證它可以時時監控着自己的孩子。

 

  4、on

on(type,[selector],[data],fn)

參數與delegate差不多但還是有細微的差別,首先type與selector換位置了,其次selector變為了可選項。

$('#myol li').on('click',getHtml);

可以看到event.currentTarget是li自己,與bind的效果一樣。至於傳selector進去,就是跟delegate一樣的意義了,除了參數順序不同,其他完全一樣。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM