溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發(fā)布時間:2020-07-08 19:50:54 來源:網(wǎng)絡 閱讀:607 作者:iszeo 欄目:web開發(fā)

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

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

1.bind(),unbind();

作用:

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

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

語法:

$(selector).bind(event,data,function) 說明:event方法名稱,data可選額外傳入?yún)?shù),function處理方法

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

示例:

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

 $(this).unbind(mouseover);

});

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


2.live(),die()

作用:

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

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

語法:

$(selector).live(event,data,function) 說明:event方法名稱,data可選額外傳入?yún)?shù),function處理方法

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

示例:

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

});

$("p").die();

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

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


3.delegate(),undelegate()

作用:

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

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

語法:

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

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

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

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

示例:

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

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


4.trigger()

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

語法:

$(selector).trigger(eventObj)

示例:

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


5.toggle()

作用:

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

語法:

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

示例:

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


向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI