>웹 프론트엔드 >JS 튜토리얼 >jQuery.off() 함수의 자세한 사용법을 이해하도록 안내합니다.

jQuery.off() 함수의 자세한 사용법을 이해하도록 안내합니다.

巴扎黑
巴扎黑원래의
2017-06-25 10:42:391825검색

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() {

warning( this.value + "-2" );

}

var $body = $("body");

// 이벤트 핸들러 btnClick1

을 클릭에 바인딩합니다. 모든 버튼 요소의 이벤트 $body.on("click", ":button", btnClick1 );

// 이벤트 핸들러 btnClick2를 모든 버튼 요소의 클릭 이벤트에 바인딩합니다

$body.on("click", ":button", btnClick2 );

//모든 요소에 대한 클릭, 마우스오버, 마우스리브 이벤트 바인딩

$body.on("click mouseover mouseleave", "a", function(event){

if( event .type == "클릭" ){

                                                                                        ~                          ‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐

}else{

                    $(this).css("color", "blue" );        

    }

});

// 모든 버튼 요소의 클릭 이벤트에 바인딩된 body 요소의 이벤트 핸들러를 제거합니다. 기능 btnClick2

// 버튼을 클릭하면 btnClick1이 계속 실행됩니다

$body .off("click", ":button", btnClick2);

// 모든 버튼 요소의 클릭 이벤트에 바인딩된 모든 body 요소를 제거합니다. 이벤트 처리 기능(btnClick1 및 btnClick2)

// 버튼을 클릭하면 이벤트 처리 기능 실행

// $body.off("click", ":button");

// 참고: $body.off("click", "#btn1"); off() 함수에 의해 지정된 선택기는 on() 함수에 의해 전달된 선택기와 일치해야 합니다.

// 모든 요소(버튼 및
요소 포함)의 클릭 이벤트에 body 요소에 의해 바인딩된 모든 핸들러를 제거합니다.

// 버튼이나 링크를 클릭해도 이벤트 핸들러가 실행되지 않습니다.

/ / $("body").off("click");

// 모든 요소의 모든 이벤트에 body 요소가 바인딩된 모든 핸들러를 제거합니다

// 버튼을 클릭하거나, 링크를 클릭하거나, 링크 안팎으로 마우스를 움직여도 이벤트 처리 기능이 실행되지 않습니다.

// $("body").off( );

실행 code (다른 코드는 직접 복사해서 실행해주세요)

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

var $btn1 = $("#btn1");

$btn1.on("click.foo.bar", function(event){

Alert("click-1");

});

$btn1.on("click.test", function(event){

Alert("click-2");

});

$btn1.on("click.test.foo", function (이벤트){

Alert("click-3");

});

$btn1.off("click.test") // 클릭-2 제거, 클릭-3

// $ btn1 .off("click.foo"); // 클릭-1 제거, 클릭-3

// $btn1.off("click.foo.bar") // 클릭-1 제거

/ / $btn1 .off("click"); // 모든 클릭 이벤트 핸들러 제거(click-1, click-2, click-3)

// $btn1.off(".foo"); 네임스페이스 foo, 단순한 클릭 이벤트가 아닙니다

위 내용은 jQuery.off() 함수의 자세한 사용법을 이해하도록 안내합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!