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() 來添加事件處理。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章