jQuery綁定事件的四種方式介紹

jQuery提供了多種綁定事件的方式，每種方式各有其特點，明白了它們之間的異同點，有助於我們在寫程式碼的時候進行正確的選擇，從而寫出優雅而容易維護的代碼。下面我們來看下jQuery中綁定事件的方式都有哪些。

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

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

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

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

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

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

bind的源碼：

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
$('#myol li').bind('click',getHtml);

bind的特點就是會把監聽器綁定到目標元素上，有一個綁一個，在頁面上的元素不會動態添加的時候使用它沒什麼問題。但如果清單中動態增加一個“列表元素5”，點選它是沒有反應的，必須再bind一次才行。要不要這麼麻煩，我們可以用live。

jQuery還有一個事件綁定的簡寫方式如a.click(function(){});、a.change(function(){});等，它們的作用與bind一樣，僅是簡寫而已。

二：live(type, [data], fn)

live的參數和bind一樣，它又有什麼蹊蹺呢，我們還是先瞥一眼源碼：

live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}

   

沒有將監聽器綁定到自己(this)身上，而是綁定到了this.context上了。這個context是什麼東西呢?其實就是元素的限定範圍，看了下面的程式碼就清楚了：

$('#myol li').context; //document
$('#myol li','#myol').context; //document
$('#myol li',$('#myol')[0]); //ol

   

通常情況下，我們都不會像第三種方式那樣使用選擇器，所以也就認為這個context通常就是document了，也就是live方法把監聽器綁定到了document上了。不把監聽器直接綁定在元素上，你是不是想起事件委託機制來了呢?若沒有，可以點擊這裡回憶一下。 live正是利用了事件委託機制來 完成事件的監聽處理，把節點的處理委託給了document。在監聽函式中，我們可以用event.currentTarget來取得到目前捕捉到事件的 節點。下面的例子來揭曉：

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

   

三：live存在那樣的缺點，所以我們就思考，既然老爺子負擔那麼重，可不可以別把監聽器綁定在document上呢，綁定在就近的父級元素上不就好了。順應正常邏輯，delegate誕生了。

參數多了一個selector，用來指定觸發事件的目標元素，監聽器將被綁定在呼叫此方法的元素上。看看原始碼：

delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}

   

又是調用了on，並且把selector傳給了on。看來這個on真的是舉足輕重的東西。照樣先不管它。看看範例先：

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

   

看了這麼多，你是不是迫不及待想看看這個on的真實面目了呢，這就來：

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

   

細微的差別，首先type與selector換位置了，其次selector變成可選項。交換位置的原因不好查證，應該是為了讓視覺上舒服一點吧。

我們先不傳selector來看一個例子：

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

   

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

終於看到on的真實作用了，那麼，這麼多的事件綁定方式，我們該如何進行選擇呢?

其實這個問題是完全不必糾結的，因為你已經知道他們之間的區別了不是麼?依實際情況斟酌使用就行。不過官方有一個推薦就是盡量使用on，因為其他 方法都是內部調用on來完成的，直接使用on可以提高效率，而且你完全可以用on來代替其他三種寫法。至於如何代替我想就不必這麼直白的寫出來了，真正理 解它們的區別之後自然而然也就不是難事了。