首頁  >  文章  >  web前端  >  jQuery.die()函數的具體分析

jQuery.die()函數的具體分析

黄舟
黄舟原創
2017-06-26 09:41:021444瀏覽

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。

參數

jQuery.die()函數的具體分析

如果省略參數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和元素绑定事件,然后使用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( );

jQuery.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