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一樣的意義了，除了參數順序不同，其他完全一樣。

以上是jQuery中bind與live以及delegate與on綁定事件的方式與差異詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！