首頁  >  文章  >  web前端  >  jQuery.die() 函數使用詳解實例

jQuery.die() 函數使用詳解實例

巴扎黑
巴扎黑原創
2017-06-30 14:00:031442瀏覽

die()函數用於移除匹配元素上綁定的一個或多個事件的事件處理函數。

die()函數主要用於解除由live()函數所綁定的事件處理函數。

此函數屬於jQuery物件(實例)。

語法

jQuery 1.3 新增函數,從jQuery 1.7開始被標記為過時,在jQuery 1.9中移除。其主要有以下兩種形式的用法:

用法一:jQuery 1.4.1 新增支援不指定任何參數。

jQueryObject.die( [ events [, handler ]] )

#移除符合目前選擇器的元素的events事件所綁定的事件處理函數handler。

用法二:jQuery 1.4.3 新增支援該用法。

jQueryObject.die( eventsMap )

用法一的變體,用於同時移除多種事件類型的多個事件處理函數。 eventsMap是一個對象,每個屬性對應用法一中的參數events,值對應用法一中的參數handler。

參數

參數 描述

events 可選/String類型一個或多個用空格分隔的事件類型和可選的命名空間,例如"click"、"focus click"、"keydown.myPlugin"。

handler 可選/Function類型指定的事件處理函數。

eventsMap Object類別類型一個Object物件,其每個屬性對應事件類型和可選的命名空間(參數events),屬性值對應綁定的事件處理函數(參數handler)。

namespace String類型指定的命名空間,例如".foo"、".myPlugin"。

如果省略參數handler,則移除符合元素指定類型的事件上所綁定的所有事件處理函數。

呼叫die()函數的目前jQuery物件的選擇器與呼叫live()函數的jQuery物件的選擇器必須一致。

如果省略了所有參數,則表示移除符合元素上為任何元素綁定的任何事件類型的任何事件處理函數。

傳回值

die()函數的回傳值為jQuery類型,傳回目前jQuery物件本身。

實際上,die()函數的參數全是篩選條件,只有符合所有參數條件的事件處理函數都會被移除。參數越多,限定條件越多,移除的範圍就越小。

範例&說明

請參考下面這段初始HTML程式碼:

<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>

首先,我們為上述button和3499910bf9dac5ae3c52d5ede7383485元素綁定事件,然後使用die ()函數解除事件綁定,對應的程式碼如下:

function btnClick1(){
    alert( this.value + "-1" );
}
function btnClick2(){
    alert( this.value + "-2" );
}
var $buttons = $(":button");
// 为所有button元素的click事件绑定事件处理函数btnClick1
$buttons.live( "click", btnClick1 );
// 为所有button元素的click事件绑定事件处理函数btnClick2
$buttons.live( "click", btnClick2 );
// 为所有a元素绑定click、mouseover、mouseleave事件
$("a").live( "click mouseover mouseleave", function(event){
    if( event.type == "click" ){
        alert("点击事件");
    }else if( event.type == "mouseover" ){
        $(this).css("color", "red");
    }else{
        $(this).css("color", "blue");       
    }
});
// 移除所有button元素的click事件绑定的事件处理函数btnClick2
// 点击按钮,只执行btnClick1
$buttons.die( "click", btnClick2 );
// 移除所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)
// 点击按钮,不会执行任何事件处理函数
// $buttons.die("click");
//注意: $("#btn1").die("click"); 无法移除btn1的点击事件,调用die()函数的jQuery对象的选择器与调用live()函数的jQuery对象的选择器必须一致。
// 移除所有a元素的任何事件绑定的所有处理函数
// $("a").die( );

此外,die()函數也可以只移除指定命名空間的事件綁定。

var $buttons = $(":button");
// 为所有button元素的click事件绑定事件处理函数
$buttons.live( "click.foo.bar", function btnClick1(){
    alert( "click-1" );
} );
// 为所有button元素的click事件绑定事件处理函数
$buttons.live( "click.test.bar", function btnClick1(){
    alert( "click-2" );
} );
// 移除包含命名空间foo的click事件绑定的事件处理函数
$buttons.die( "click.foo" ); // 移除click-1
//移除包含命名空间bar的click事件绑定的事件处理函数
// $buttons.die( "click.bar" ); // 移除click-1和click-2
//移除包含命名空间test的click事件绑定的事件处理函数
// $buttons.die( "click.test" ); // 移除click-2
// 移除所有button元素的click事件绑定的所有事件处理函数
// $buttons.die("click"); // 移除click-1和click-2

以上是jQuery.die() 函數使用詳解實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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