jQuery基礎系列（三）---事件介紹(3)---事件處理方法

什么是事件處理方法？其實就是把多個事件綁定在一個元素中，你也可以理解為事件集，閑話不多說，下面亮代碼

/*===================================Jquery時間處理方法======================================================*/

1.bind(),unbind();

作用：

bind()函數為被選擇元素添加一個或者多個事件

unbind()函數為被選元素移除一個或多個事件

語法：

$(selector).bind(event,data,function) 說明：event方法名稱，data可選額外傳入參數,function處理方法

$(selector).unbind(event,function) 說明：event方法名稱，function 規定從元素指定事件取消綁定的函數名

示例：

$("button").bind(click,mouscover,function(){
 $("p").slideToggle();

 $(this).unbind(mouseover);

});

當按鈕移入或點擊時，P元素隱藏顯示，同時移除鼠標移入事件

2.live(),die()

作用：

live()函數為被選擇元素添加一個或者多個事件

die()函數為被選元素移除一個或多個事件

語法：

$(selector).live(event,data,function) 說明：event方法名稱，data可選額外傳入參數,function處理方法

$(selector).die(event,function) 說明：event方法名稱，function 規定從元素指定事件取消綁定的函數名

示例：

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

});

$("p").die();

當按鈕移入或點擊時，P元素隱藏顯示，同時移除鼠標移入事件

移除所有通過 live() 方法向 p 元素添加的事件處理程序;

3.delegate(),undelegate()

作用：

delegate() 方法為指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規定當這些事件發生時運行的函數。
使用 delegate() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創建的新元素）

undelegate() 方法刪除由 delegate() 方法添加的一個或多個事件處理程序。

語法：

$(selector).delegate(childSelector,event,data,function)

參數說明：childSelector必需。規定要附加事件處理程序的一個或多個子元素。event必需。規定附加到元素的一個或多個事件。由空格分隔多個事件值。必須是有效的事件。data可選。規定傳遞到函數的額外數據。function必需。規定當事件發生時運行的函數。

$(selector).undelegate(selector,event,function)

selector可選。規定需要刪除事件處理程序的選擇器。event可選。規定需要刪除處理函數的一個或多個事件類型。function可選。規定要刪除的具體事件處理函數。

示例：

$(document).ready(function(){
 $("body").delegate("p","click",function(){
   $(this).slideToggle();
 });
 $("button").click(function(){
   $("body").undelegate();
 });
});

點擊任何P元素都會消失，點擊按鈕取消消失效果

4.trigger(）

作用：trigger() 方法觸發被選元素的指定事件類型

語法：

$(selector).trigger(eventObj)

示例：

$(document).ready(function(){
 $("input").select(function(){
   $("input").after("文本被選中！");
 });
 $("button").click(function(){
   $("input").trigger("select");
 });
});

5.toggle()

作用：

toggle() 方法用于綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。
該方法也可用于切換被選元素的 hide() 與 show() 方法。

語法：

$(selector).toggle(function1(),function2(),functionN(),...) 參數說明：function1()必需。規定當元素在每偶數次被點擊時要運行的函數。function2() 必需。規定當元素在每奇數次被點擊時要運行的函數。functionN(),... 可選。規定需要切換的其他函數。

示例：

$("p").toggle(
 function(){
 $("body").css("background-color","green");},
 function(){
 $("body").css("background-color","red");},
 function(){
 $("body").css("background-color","yellow");}
);