jQuery中.live()方法的用法深入解析

概述

jQuery給所有比對的元素附加一個事件處理函數，即使這個元素是以後再添加進來的也有效。

這個方法是基本是的 .bind() 方法的一個變體。使用 .bind()時，選擇器比對的元素會附加一個事件處理函數，而以後再添加的元素則不會有。為此需要再使用一次 .bind() 才行。比如說

Click here

可以給這個元素綁定一個簡單的click事件：

$('.clickme').bind('click', function() {

 alert("Bound handler called.");     

}); 

當點選了元素，就會彈出一個警告框。

然後，想象一下這之後有另一個元素添加進來了。

$('body').append('

Another target

');

盡管這個新的元素也能夠比對選擇器".clickme" ，但是由于這個元素是在調用 .bind() 之後添加的，是以點選這個元素不會有任何效果。

.live()就提供了對應這種情況的方法。如果我們是這樣綁定click事件的：

$('.clickme').live('click', function() {

 alert("Live handler called.");      

});

然後再添加一個新元素：

$('body').append('

Another target

');

然後再點選新增的元素，他依然能夠觸發事件處理函數。 

事件委托

.live()方法能對一個還沒有添加進DOM的元素有效，是由于使用了事件委托：綁定在祖先元素上的事件處理函數可以對在後代上觸發的事件作出回應。

傳遞給 .live()的事件處理函數不會綁定在元素上，而是把他作為一個特殊的事件處理函數，綁定在 DOM樹的根節點上。在我們的例子中，當點選新的元素後，會依次發生下列步驟：

1、生成一個click事件傳遞給<div> 來處理

2、由于沒有事件處理函數直接綁定在 <div>上，是以事件冒泡到DOM樹上

3、事件不斷冒泡一直到DOM樹的根節點，預設情況下上面綁定了這個特殊的事件處理函數。

4、執行由 .live() 綁定的特殊的click 事件處理函數。

5、這個事件處理函數首先檢測事件對象的target 來确定是不是需要繼續。這個測試是通過檢測 $(event.target).closest('.clickme')能否找到比對的元素來實作的。

6、如果找到了比對的元素，那麼調用原始的事件處理函數。

由于隻有在事件發生時才會在上面的第五步裡做測試，是以在任何時候添加的元素都能夠響應這個事件。

附加說明

.live()雖然很有用，但由于其特殊的實作方式，是以不能簡單的在任何情況下替換 .bind()。主要的不同有：

在jQuery 1.4中，.live()方法支援自定義事件，也支援所有的JavaScript 事件。在jQuery 1.4.1中，甚至也支援 focus 和 blue事件了（映射到更合适，并且可以冒泡的focusin和focusout上）。

另外，在jQuery1.4.1中，也能支援hover（映射到"mouseenter mouseleave"）。然而在jQuery1.3.x中，隻支援支援的JavaScript事件和自定義事件：click, dblclick, keydown, keypress,keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.

.live()并不完全支援通過DOM周遊的方法找到的元素。取而代之的是，應當總是在一個選擇器後面直接使用 .live()方法，正如前面例子裡提到的。

當一個事件處理函數用 .live()綁定後，要停止執行其他的事件處理函數，那麼這個函數必須傳回 false。 僅僅調用 .stopPropagation()無法實作這個目的。

參考 .bind() 方法可以獲得更多關于事件綁定的資訊。

在jQuery 1.4.1中，你可以一次綁定多個事件給 .live() ，跟.bind() 提供的功能類似。

在jQuery 1.4中，data參數可以用于把附加資訊傳遞給事件處理函數。一個很好的用處是應付由閉包導緻的問題。可以參考 .bind()的讨論來獲得更多資訊。

參數

typeString     事件類型

data(可選)    Object          欲綁定的事件處理函數

fn                  Function        欲綁定的事件處理函數

示例

HTML 代碼:

Click me!

jQuery 代碼:

    $("p").live("click", function(){

         $(this).after("

Another paragraph!

");

    });

描述:

阻止預設事件行為和事件冒泡，傳回false

jQuery 代碼:

$("a").live("click", function() { returnfalse; });

描述:

僅僅阻止預設事件行為

jQuery 代碼:

$("a").live("click", function(event){

    event.preventDefault();

 });