1. 程式人生 > >jQuery中bind(),one(),on(),live()這幾個繫結事件函式的區別

jQuery中bind(),one(),on(),live()這幾個繫結事件函式的區別

1、bind()方法

為每個匹配元素的特定事件繫結事件處理函式。bind()方法的底層邏輯是on()方法
.bind() 方法是用於往文件上附加行為的主要方式。所有JavaScript事件物件,比如focus, mouseover, 和 resize,都是可以作為type引數傳遞進來的。
舉例說明:
.bind()最基本的用法是:

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

這個程式碼能使ID為foo的元素響應click事件。當用戶點選元素內部之後,就會彈出一個警告框。

2、on()方法

在選擇元素上繫結一個或多個事件的事件處理函式。
on()方法繫結事件處理程式到當前選定的jQuery物件中的元素。在jQuery 1.7中,.on()方法 提供繫結事件處理程式所需的所有功能
這裡寫圖片描述
引數說明:
events:一個或多個用空格分隔的事件型別和可選的名稱空間,如”click”或”keydown.myPlugin” 。
selector:一個選擇器字串用於過濾器的觸發事件的選擇器元素的後代。如果選擇的< null或省略,當它到達選定的元素,事件總是觸發。
data:當一個事件被觸發時要傳遞event.data給事件處理函式。
fn:該事件被觸發時執行的函式。 false 值也可以做一個函式的簡寫,返回false。

3、one()方法

為每一個匹配元素的特定事件(像click)繫結一個一次性的事件處理函式。
在每個物件上,這個事件處理函式只會被執行一次。其他規則與bind()函式相同。這個事件處理函式會接收到一個事件物件,可以通過它來阻止(瀏覽器)預設的行為。如果既想取消預設的行為,又想阻止事件起泡,這個事件處理函式必須返回false。
這裡寫圖片描述
引數說明:
type:新增到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。
data:將要傳遞給事件處理函式的資料對映
fn:每當事件觸發時執行的函式。

4、live()方法

jQuery 給所有匹配的元素附加一個事件處理函式,即使這個元素是以後再新增進來的也有效


這裡寫圖片描述

這個方法是基本是的 .bind() 方法的一個變體。使用 .bind() 時,選擇器匹配的元素會附加一個事件處理函式,而以後再新增的元素則不會有。為此需要再使用一次 .bind() 才行。
事件委託
.live() 方法能對一個還沒有新增進DOM的元素有效,是由於使用了事件委託:繫結在祖先元素上的事件處理函式可以對在後代上觸發的事件作出迴應。傳遞給 .live() 的事件處理函式不會繫結在元素上,而是把他作為一個特殊的事件處理函式,繫結在 DOM 樹的根節點上。
附加說明:
.live() 雖然很有用,但由於其特殊的實現方式,所以不能簡單的在任何情況下替換 .bind()。主要的不同有:

  1. 在jQuery 1.4中,.live()方法支援自定義事件,也支援所有的 JavaScript 事件。在jQuery 1.4.1中,甚至也支援 focus 和 blur 事件了(對映到更合適,並且可以冒泡的focusin和focusout上)。另外,在jQuery 1.4.1中,也能支援hover(對映到”mouseenter mouseleave”)。然而在jQuery 1.3.x中,只支援支援的JavaScript事件和自定義事件:click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
  2. .live() 並不完全支援通過DOM遍歷的方法找到的元素。取而代之的是,應當總是在一個選擇器後面直接使用 .live() 方法,正如前面例子裡提到的。
  3. 當一個事件處理函式用 .live() 繫結後,要停止執行其他的事件處理函式,那麼這個函式必須返回 false。 僅僅呼叫 .stopPropagation() 無法實現這個目的。

特別注意:

從 jQuery 1.7 開始,不再建議使用 .live() 方法。請使用 .on() 來新增事件處理。