jQuery.undelegate() 함수 사용법에 대한 자세한 설명

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

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

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

Syntax

jQuery 1.4.2에 이 기능이 추가되었습니다. 주로 다음 세 가지 형태의 사용법이 있습니다:

사용법 1:

jQueryObject.undelegate( [ selector , events [, handler ]] )

현재 일치하는 요소의 이벤트 이벤트에 바인딩된 이벤트 핸들러를 선택기 요소로 제거합니다.

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

jQueryObject.undelegate( selector , eventsMap )

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

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

jQueryObject.undelegate( namespace )

모든 요소에 대한 namespace네임스페이스를 포함하는 이벤트에 대해 현재 일치하는 요소에서 모든 이벤트 핸들러를 제거합니다.

parameters

undelegate() 함수는 현재 일치하는 요소의 하위 요소 선택기에 바인딩된 이벤트 이벤트의 이벤트 핸들러를 제거합니다.

selector 매개변수가 생략되면 모든 요소에 바인딩된 이벤트 핸들러가 제거됩니다.

매개변수 선택기는 대리자() 함수를 통해 바인딩을 추가할 때 전달된 선택기와 일치해야 합니다.

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

모든 매개변수가 생략되면 현재 요소의 모든 요소에 바인딩된 모든 이벤트 유형의 이벤트 핸들러를 제거한다는 의미입니다.

반환 값

undelegate()함수의 반환 값은 jQuery 유형이며 현재 jQuery 개체 자체를 반환합니다.

사실 unelegate() 함수의 매개변수는 모두 필터링 조건입니다. 모든 매개변수 조건과 일치하는 이벤트 처리 함수만 제거됩니다. 매개변수가 많을수록 제한도 많아지고 제거되는 범위도 작아집니다.

示例&说明

请参考下面这段初始HTML代码：

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

首先，我们为上述button和元素绑定事件，然后使用undelegate()函数解除事件绑定，相应的代码如下：

function btnClick1(){
    alert( this.value + "-1" );
}

function btnClick2(){
    alert( this.value + "-2" );
}

var $body = $("body");

// 在body元素上为所有button元素的click事件绑定事件处理函数btnClick1
$body.delegate( ":button", "click", btnClick1 );

//在body元素上为所有button元素的click事件绑定事件处理函数btnClick2
$body.delegate( ":button", "click", btnClick2 );

//为所有a元素绑定click、mouseover、mouseleave事件
$body.delegate( "a", "click mouseover mouseleave", function(event){
    if( event.type == "click" ){
        alert("点击事件");
    }else if( event.type == "mouseover" ){
        $(this).css("color", "red");
    }else{
        $(this).css("color", "blue");       
    }
});


//移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2
//点击按钮，只执行btnClick1
$body.undelegate(":button", "click", btnClick2);


//移除body元素为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)
//点击按钮，不会执行任何事件处理函数
// $body.undelegate(":button", "click");


//注意： $body.undelegate("#btn1", "click"); 无法移除btn1的点击事件，undelegate()函数指定的选择器必须与delegate()函数传入的选择器一致。


// 移除body元素为所有元素(包括button和<a>元素)的任何事件绑定的所有处理函数
// 点击按钮、链接，或用鼠标在链接上移入、移出，都不会触发执行任何事件处理函数
//$("body").undelegate( );

此外undelegate()函数还可以只移除指定命名空间的所有元素的所有事件绑定。

var $body = $("body");

$body.delegate("#btn1", "click.foo.bar", function(event){
    alert("click-1");
});

$body.delegate("#btn1", "click.test", function(event){
    alert("click-2");
});

$body.delegate("#btn1", "click.test.foo", function(event){
    alert("click-3");
});

// $body.undelegate(".test"); // 移除click-2、click-3

// $body.undelegate(".foo");  // 移除click-1、click-3

// $body.undelegate(".foo.bar");  // 移除click-1

위 내용은 jQuery.undelegate() 함수 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!