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

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

已知有4個列表元素:

　　列表元素1

 

　　列表元素2

 

　　列表元素3

 

 　　列表元素4

 

　　一、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一次才行。

　　

　　二、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。

使用事件委託的優勢一目瞭然，新添加的元素沒必要再綁定一次監聽器。

 

　　三、delegate

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

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

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

}

這下，咱們的選擇又多了一些靈活性，不單能夠利用事件委託，還能夠選擇委託的對象。畢竟老麻煩同一我的幫忙很很差嘛。對於如何選擇委託對象，仍是須要必定的策略的，畢竟父級元素能夠有不少。我以爲原則應該是選擇最近的「穩定」元素，選擇最近是由於事件能夠更快的冒泡上去，可以在第一時間進行處理。所謂「穩定」是指該父級元素是一開始就在頁面上的，不是動態添加上來的，並且未來也不會消失掉，這樣能夠保證它能夠時時監控着本身的孩子。

 

　　四、on

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

參數與delegate差很少但仍是有細微的差異，首先type與selector換位置了，其次selector變爲了可選項。

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

能夠看到event.currentTarget是li本身，與bind的效果同樣。至於傳selector進去，就是跟delegate同樣的意義了，除了參數順序不一樣，其餘徹底同樣。