>  기사  >  웹 프론트엔드  >  jQuery.die() 함수 상세 분석

jQuery.die() 함수 상세 분석

黄舟
黄舟원래의
2017-06-26 09:41:021444검색

die() 함수는 일치하는 요소에 바인딩된 하나 이상의 events에 대한 이벤트 처리 함수를 제거하는 데 사용됩니다.

die() 함수는 주로 live() 함수에 바인딩된 이벤트 처리 함수의 차단을 해제하는 데 사용됩니다.

이 함수는 jQuery 객체(인스턴스)에 속합니다.

Syntax

이 함수는 jQuery 1.3에 추가되었습니다. jQuery 1.7부터 사용되지 않는 것으로 표시되었으며 jQuery 1.9에서는 제거되었습니다. 주로 다음과 같은 두 가지 사용 형태가 있습니다.

사용법 1: jQuery 1.4.1에서는 매개 변수를 지정하지 않는 기능을 새로 지원합니다.

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

현재 선택기와 일치하는 요소의 이벤트 이벤트에 바인딩된 이벤트 핸들러 함수 핸들러를 제거하세요.

사용법 2: jQuery 1.4.3에서는 이 사용 방법을 새로 지원합니다.

jQueryObject.die( eventsMap )

사용법 1의 변형으로, 여러 이벤트 유형의 여러 이벤트 핸들러를 동시에 제거하는 데 사용됩니다. eventsMap은 개체입니다. 각 attribute는 메서드 1의 매개변수 이벤트에 해당하고 값은 메서드 1의 매개변수 처리기에 해당합니다.

Parameters

jQuery.die() 함수 상세 분석

매개변수 핸들러를 생략하면 해당 요소와 일치하는 지정된 유형의 이벤트에 바인딩된 모든 이벤트 핸들러가 제거됩니다.

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으로 문의하세요.