jQuery事件綁定的四種方法

標籤：綁定   注意   api   事件綁定   alert   change   建立   color   jquer   

jQuery中提供了四種綁定事件的方法，分別是bind、live、delegate、on，對應的解除監聽的函數分別是unbind、die、undelegate、off：

一、on()方法(首選方法)

on() 方法在被選元素及子項目上添加一個或多個事件處理常式。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 程式碼程式庫。

參數：

event:必需。規定要從被選元素移除的一個或多個事件或命名空間。由空格分隔多個事件值。必須是有效事件

data:可選。規定只能添加到指定的子項目上的事件處理常式（且不是選取器本身，比如已廢棄的 delegate() 方法）。

function:可選。規定當事件發生時啟動並執行函數。

map:規定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一個或多個事件，以及當事件發生時啟動並執行函數。

文法：$(selector).on(event,childSelector,data,function,map)

舉例：給p元素添加單擊事件

$("p").on("click",function(){    alert("The paragraph was clicked.");});

二、bind()方法

bind()作用就是在選擇到的元素上綁定特定事件類型的監聽函數，

參數：

type:必需。事件類型，如click、change、mouseover等;

data:可選。傳入監聽函數的參數，通過event.data取到。可選;

function:必需。規定當事件發生時啟動並執行函數(監聽函數)，可傳入event對象，這裡的event是jQuery封裝的event對象，與原生的event對象有區別，使用時需要注意。

map:規定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一個或多個事件，以及當事件發生時啟動並執行函數

文法：$(selector).bind(event,data,function,map)

舉例：給<p>添加一個單擊事件

$("p").bind("click",function(){    alert("單擊p元素");});

三、live()方法

live()，在版本 1.9 中被移除。請使用on()方法代替。添加一個或多個事件處理常式到當前或未來的被選元素。(還是總結在此)

參數：

event：必需。規定添加到元素的一個或多個事件。由空格分隔多個事件值。必須是有效事件。

data:可選。傳遞到該函數的額外參數

function:必需。當事件發生時，啟動並執行函數

文法：$(selector).live(event,data,function)

舉例：當點擊按鈕時，隱藏或顯示 <p> 元素：

$("button").live("click",function(){    $("p").slideToggle();});

四、delegate()方法

delegate() 方法為指定的元素（屬於被選元素的子項目）添加一個或多個事件處理常式，並規定當這些事件發生時啟動並執行函數。使用 delegate() 方法的事件處理常式適用於當前或未來的元素（比如由指令碼建立的新元素）。

參數：

childSelector：必需。規定要添加事件處理常式的一個或多個子項目。

event：必需。規定添加到元素的一個或多個事件。由空格分隔多個事件值。必須是有效事件。

data:可選。傳遞到該函數的額外參數

function:必需。當事件發生時，啟動並執行函數

文法：$(selector).delegate(childSelector,event,data,function)

舉例：當單擊 <div> 元素內部的 <p> 元素時，改變所有 <p> 元素的背景顏色：

$("div").delegate("p","click",function(){    $("p").css("background-color","pink");});

jQuery事件綁定的四種方法