1. 程式人生 > >Jquery之繫結事件的三種方法(.bind .live .on .delegate )

Jquery之繫結事件的三種方法(.bind .live .on .delegate )

live方法其實是bind方法的變種,其基本功能就同bind方法的功能是一樣的,都是為一個元素繫結某個事件,但是bind方法只能給當前存在的元素繫結事件,對於事後採用JS等方式新生成的元素無效,而live方法則正好彌補了bind方法的這個缺陷,它可以對後生成的元素也可以繫結相應的事件。

1.$(selector).bind(event,data,function)     親自試一試

bind() 方法為被選元素新增一個或多個事件處理程式,並規定事件發生時執行的函式

bind()對於未來的元素無效,live()彌補這個缺點。

描述
event

必需。規定新增到元素的一個或多個事件。

由空格分隔多個事件。必須是有效的事件。

data 可選。規定傳遞到函式的額外資料。
function 必需。規定當事件發生時執行的函式。

$(selector).bind({event:function, event:function, ...})    親自試一試

引數 描述
{event:function, event:function, ...} 必需。規定事件對映,其中包含一個或多個新增到元素的事件,以及當事件發生時執行的函式。

2.$(selector).live(event,data,function)   親自試一試

live() 方法為被選元素附加一個或多個事件處理程式,並規定當這些事件發生時執行的函式。

通過 live() 方法附加的事件處理程式適用於匹配選擇器的當前及未來的元素(比如由指令碼建立的新元素)。


3.$(selector).on(event,childSelector,data,function,map)      嘗試一下 »

描述
event 必需。規定要從被選元素移除的一個或多個事件或名稱空間。

由空格分隔多個事件值。必須是有效的事件。
childSelector 可選。規定只能新增到指定的子元素上的事件處理程式(且不是選擇器本身,比如已廢棄的 delegate() 方法)。
data 可選。規定傳遞到函式的額外資料。
function 可選。規定當事件發生時執行的函式。
map 規定事件對映 ({event:function, event:function, ...}),包含要新增到元素的一個或多個事件,以及當事件發生時執行的函式。

從 bind() 改為 on()
如何使用 on() 來達到與 bind() 相同的效果。

從 live() 改為 on()
如何使用 on() 來達到與 live() 相同的效果。

新增多個事件處理程式
如何向元素新增多個事件處理程式。

在元素上新增自定義事件
如何在元素上新增自定義名稱空間事件。

移除事件處理程式
如何使用 off() 方法移除事件處理程式。

4.$(selector).delegate(childSelector,event,data,function)   親自試一試

delegate() 方法為指定的元素(屬於被選元素的子元素)新增一個或多個事件處理程式,並規定當這些事件發生時執行的函式。

使用 delegate() 方法的事件處理程式適用於當前或未來的元素(比如由指令碼建立的新元素)。