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

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

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

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

Syntax

이 기능은 jQuery 1.7에서 추가되었습니다. 주로 다음과 같은 두 가지 사용법이 있습니다.

Usage 1:

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

Usage 2:

jQueryObject.off( eventsMap [, selector ] )

Parameters

매개변수 설명

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

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

selector 옵션/문자열 유형 바인딩된 이벤트를 트리거할 수 있는 하위 요소를 지정하는 데 사용되는 jQuery 선택기입니다. 이 매개변수가 null이거나 생략되면 현재 요소 자체가 이벤트에 바인딩된다는 의미입니다(이벤트 스트림이 현재 요소에 도달할 수 있는 한 실제 트리거러도 하위 요소일 수 있음).

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

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

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

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

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

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

반환 값

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

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

예제 및 설명

다음 초기 HTML 코드를 참조하세요.

CodePlayer

먼저 위의 버튼을 생성하고 elements 이벤트를 바인딩한 후 off() 함수를 사용하여 이벤트 바인딩을 해제합니다. 해당 코드는 다음과 같습니다.

function btnClick1(){
    alert( this.value + "-1" );
}
function btnClick2(){
    alert( this.value + "-2" );
}
var $body = $("body");
// 为所有button元素的click事件绑定事件处理函数btnClick1
$body.on("click", ":button", btnClick1 );
// 为所有button元素的click事件绑定事件处理函数btnClick2
$body.on("click", ":button", btnClick2 );
//为所有a元素绑定click、mouseover、mouseleave事件
$body.on("click mouseover mouseleave", "a", 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.off("click", ":button", btnClick2);
// 移除body元素为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)
// 点击按钮，不会执行任何事件处理函数
// $body.off("click", ":button");
// 注意： $body.off("click", "#btn1"); 无法移除btn1的点击事件，off()函数指定的选择器必须与on()函数传入的选择器一致。
// 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数
// 点击按钮或链接，都不会触发执行任何事件处理函数
// $("body").off("click");
// 移除body元素为所有元素的任何事件绑定的所有处理函数
// 点击按钮，或点击链接或者鼠标移入/移出链接，都不会触发执行任何事件处理函数
// $("body").off( );

또한 off() 함수는 지정된 네임스페이스의 이벤트 바인딩만 제거할 수도 있습니다.