live(type,[data],fn)

2018-02-24 15:15 更新

返回值:jQuerylive(type, [data], fn)

概述

jQuery 給所有匹配的元素附加一個(gè)事件處理函數(shù)，即使這個(gè)元素是以后再添加進(jìn)來的也有效。

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

<body>
  <div class="clickme">Click here</div>
</body>

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


$('.clickme').bind('click', function() {
  alert("Bound handler called.");
});

當(dāng)點(diǎn)擊了元素，就會彈出一個(gè)警告框。然后，想象一下這之后有另一個(gè)元素添加進(jìn)來了。

$('body').append('<div class="clickme">Another target</div>');

盡管這個(gè)新的元素也能夠匹配選擇器 ".clickme" ，但是由于這個(gè)元素是在調(diào)用 .bind() 之后添加的，所以點(diǎn)擊這個(gè)元素不會有任何效果。

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

$('.clickme').live('click', function() {
  alert("Live handler called."); 
});

然后再添加一個(gè)新元素：


$('body').append('<div class="clickme">Another target</div>');

然后再點(diǎn)擊新增的元素，他依然能夠觸發(fā)事件處理函數(shù)。

事件委托

.live() 方法能對一個(gè)還沒有添加進(jìn)DOM的元素有效，是由于使用了事件委托：綁定在祖先元素上的事件處理函數(shù)可以對在后代上觸發(fā)的事件作出回應(yīng)。傳遞給 .live() 的事件處理函數(shù)不會綁定在元素上，而是把他作為一個(gè)特殊的事件處理函數(shù)，綁定在 DOM 樹的根節(jié)點(diǎn)上。在我們的例子中，當(dāng)點(diǎn)擊新的元素后，會依次發(fā)生下列步驟：

  1. 生成一個(gè)click事件傳遞給
    來處理 由于沒有事件處理函數(shù)直接綁定在 <divgt; 上，所以事件冒泡到DOM樹上
    事件不斷冒泡一直到DOM樹的根節(jié)點(diǎn)，默認(rèn)情況下上面綁定了這個(gè)特殊的事件處理函數(shù)。
    執(zhí)行由 .live() 綁定的特殊的 click 事件處理函數(shù)。
    這個(gè)事件處理函數(shù)首先檢測事件對象的 target 來確定是不是需要繼續(xù)。這個(gè)測試是通過檢測 $(event.target).closest('.clickme') 能否找到匹配的元素來實(shí)現(xiàn)的。
    如果找到了匹配的元素，那么調(diào)用原始的事件處理函數(shù)。

由于只有在事件發(fā)生時(shí)才會在上面的第五步里做測試，因此在任何時(shí)候添加的元素都能夠響應(yīng)這個(gè)事件。

附加說明

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

  • 在jQuery 1.4中，.live()方法支持自定義事件，也支持所有的 JavaScript 事件。在jQuery 1.4.1中，甚至也支持 focus 和 blue 事件了（映射到更合適，并且可以冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。然而在jQuery 1.3.x中，只支持支持的JavaScript事件和自定義事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
  • .live() 并不完全支持通過DOM遍歷的方法找到的元素。取而代之的是，應(yīng)當(dāng)總是在一個(gè)選擇器后面直接使用 .live() 方法，正如前面例子里提到的。
  • 當(dāng)一個(gè)事件處理函數(shù)用 .live() 綁定后，要停止執(zhí)行其他的事件處理函數(shù)，那么這個(gè)函數(shù)必須返回 false。 僅僅調(diào)用 .stopPropagation() 無法實(shí)現(xiàn)這個(gè)目的。

參考 .bind() 方法可以獲得更多關(guān)于事件綁定的信息。

在jQuery 1.4.1 中，.live() 能接受多個(gè)，用空間分隔事件，在提供類似.bind()的功能 。例如，我們可以“l(fā)ive ” 同時(shí)綁定mouseover和mouseout事件,像這樣： 


$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

在jQuery 1.4.3中:你可以綁定一個(gè)或多個(gè)事件類型的字符串和函數(shù)的數(shù)據(jù)映射來執(zhí)行他們


$("a").live({
  click: function() {
    // do something on click
  },
  mouseover: function() {
    // do something on mouseover
  }
});

在jQuery 1.4 中，data參數(shù)可以用于把附加信息傳遞給事件處理函數(shù)。一個(gè)很好的用處是應(yīng)付由閉包導(dǎo)致的問題?？梢詤⒖?.bind() 的討論來獲得更多信息。

在jQuery 1.4 中， live事件可以綁定到“context”DOM元素，而不是默認(rèn)的文檔的根。要設(shè)置此背景下，我們通過在一個(gè)單一的DOM元素(而不是一個(gè)jQuery集合或選擇器)使用jQuery() function's second argument。


$('div.clickme', $('#container')[0]).live('click', function() {
  // Live handler called.
});

參數(shù)

type,[fn]String,FunctionV1.3

type:一個(gè)或多個(gè)事件類型，由空格分隔多個(gè)事件。

fn:要從每個(gè)匹配元素的事件中反綁定的事件處理函數(shù)

type,[data],falseString,Array,boolV1.4

type:一個(gè)或多個(gè)事件類型，由空格分隔多個(gè)事件。

data:傳遞給事件處理函數(shù)的附加參數(shù)

false:設(shè)置為false會使默認(rèn)的動作失效。

eventStringV1.4.3

一個(gè)或多個(gè)事件類型的字符串和函數(shù)的數(shù)據(jù)映射來執(zhí)行他們

示例

描述:

點(diǎn)擊生成的p依然據(jù)有同樣的功能。

HTML 代碼:
<p>Click me!</p>
jQuery 代碼:
$("p").live("click", function(){
    $(this).after("<p>Another paragraph!</p>");
});

描述:

阻止默認(rèn)事件行為和事件冒泡，返回 false

jQuery 代碼:
$("a").live("click", function() { return false; });

描述:

僅僅阻止默認(rèn)事件行為

jQuery 代碼:
$("a").live("click", function(event){
  event.preventDefault();
});
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號