首頁  >  文章  >  web前端  >  jQuery中bind(),one(),on(),live()這幾個綁定事件函數有哪些差別

jQuery中bind(),one(),on(),live()這幾個綁定事件函數有哪些差別

一个新手
一个新手原創
2017-10-10 10:31:001984瀏覽

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()方法 提供綁定事件處理程序所需的所有功能
jQuery中bind(),one(),on(),live()這幾個綁定事件函數有哪些差別
參數說明:
events:一個或多個用空格分隔的事件類型和可選的命名空間,如”click”或”keydown.myPlugin” 。
selector:一個選擇器字串用於過濾器的觸發事件的選擇器元素的後代。如果選擇的data:當一個事件被觸發時要傳遞event.data給事件處理函數。
fn:該事件被觸發時執行的函數。 false 值也可以做一個函數的簡寫,回傳false。

3、one()方法

為每一個符合元素的特定事件(像click)綁定一個一次性的事件處理函數。
在每個物件上,這個事件處理函數只會被執行一次。其他規則與bind()函數相同。這個事件處理函數會接收到一個事件對象,可以透過它來阻止(瀏覽器)預設的行為。如果既想取消預設的行為,又想阻止事件起泡,這個事件處理函數必須回傳false。
jQuery中bind(),one(),on(),live()這幾個綁定事件函數有哪些差別
參數說明:
type:新增到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。
data:將要傳遞給事件處理函數的資料映射
fn:每當事件觸發時執行的函數。

4、live()方法

jQuery 給所有符合的元素附加一個事件處理函數,即使這個元素是以後再加入進來的也有效
jQuery中bind(),one(),on(),live()這幾個綁定事件函數有哪些差別

這個方法是基本是的 .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.

####################################################################################################### ##.live() 並不完全支援透過DOM遍歷的方法找到的元素。取而代之的是,應當總是在一個選擇器後面直接使用 .live() 方法,正如前面例子所提到的。 ############當一個事件處理函數用 .live() 綁定後,要停止執行其他的事件處理函數,那麼這個函數就必須傳回 false。 僅僅呼叫 .stopPropagation() 就無法達成這個目的。 ############特別注意:######從 jQuery 1.7 開始,不再建議使用 .live() 方法。請使用 .on() 來新增事件處理。 ###

以上是jQuery中bind(),one(),on(),live()這幾個綁定事件函數有哪些差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn