jQuery.die() 함수 사용의 자세한 예

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

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)

사용법의 변형으로, 여러 이벤트 유형의 여러 이벤트 핸들러를 동시에 제거하는 데 사용됩니다. eventsMap은 객체이며, 각 속성은 메서드 1의 매개변수 이벤트에 적용되고, 값은 메서드 1의 매개변수 핸들러에 적용됩니다.

Parameters

매개변수 설명

events 선택적/문자열 유형 공백과 선택적 namespace로 구분된 하나 이상의 이벤트 유형(예: "click", "focus click", "keydown.myPlugin").

handler 선택적/이벤트 핸들러 함수는 함수 유형에 따라 지정됩니다.

eventsMap Object classtype은 Object 객체이며, 각 속성은 이벤트 유형 및 선택적 네임스페이스(매개변수 이벤트)에 해당하고, 속성 값은 바인딩된 이벤트 처리 함수(매개변수 핸들러)에 해당합니다.

namespace ".foo", ".myPlugin"과 같이 문자열 유형으로 지정되는 네임스페이스입니다.

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

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>

먼저 위의 버튼과 요소에 이벤트를 바인딩한 다음 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() 함수는 지정된 네임스페이스의 이벤트 바인딩만 제거할 수도 있습니다.