Take you to understand the detailed usage of jQuery.off() function

The

off() function is used to remove one or more events bound to an element. Event handling function.

The off() function is mainly used to unblock the event processing function bound by the on() function.

This function belongs to the jQuery object (instance).

Syntax

jQuery 1.7 Added this function. It mainly has the following two forms of usage:

Usage one:

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

Usage two:

jQueryObject.off( eventsMap [, selector ] )

Parameters

Parameter Description

events Optional/String type one or more separated by spaces Event type and optional namespace, such as "click", "focus click", "keydown.myPlugin".

eventsMap Object type is an Object object, each attribute corresponds to the event type and optional namespace (parameter events), and the attribute value corresponds to the bound event processing function (parameter handler) .

selector Optional/String type A jQuery selector used to specify which descendant elements can trigger bound events. If this parameter is null or omitted, it means that the current element itself is bound to the event (the actual triggerer may also be a descendant element, as long as the event stream can reach the current element).

handler Optional/event handling function specified by Function type.

The off() function will remove the event handler of the events event bound to the descendant element selector on the current matching element.

If the selector parameter is omitted, the event handler bound to any element is removed.

The parameter selector must be consistent with the selector passed in when adding binding through the on() function.

If the parameter handler is omitted, all event handling functions bound to the specified event type of the specified element will be removed.

If all parameters are omitted, it means to remove any event handler function of any event type bound to any element on the current element.

Return value

off()The return value of the function is of jQuery type and returns the current jQuery object itself.

In fact, the parameters of the off() function are all filtering conditions, and only event processing functions that match all parameter conditions will be removed. The more parameters there are, the more qualifications there are and the smaller the range that is removed.

Example & Description

Please refer to the following initial HTML code:

First, we bind events to the above button and elements, and then use the off() function to unbind the event. The corresponding code is as follows:

function btnClick1(){

alert( this.value + "-1" );

}

function btnClick2(){

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

}

var $body = $("body");

// Bind the click event of all button elements Event handling function btnClick1

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

// Bind the event handling function btnClick2## to the click event of all button elements

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

//Bind click, mouseover, mouseleave events for all a elements

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

if( event.type == "click" ){

alert("click event");

}else if( event.type == "mouseover" ){

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

  }else{

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

}

});

// Remove the body element The event handler function btnClick2 bound to the click event of all button elements

// Click the button, btnClick1 will still execute

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

// Remove all event handling functions (btnClick1 and btnClick2) bound by the body element to the click events of all button elements

// Clicking the button will not execute any event handling functions

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

// Note: $body.off("click", "#btn1"); cannot be moved Except for the click event of btn1, the selector specified by the off() function must be consistent with the selector passed in by the on() function.

// Remove all handler functions bound by the body element to the click event of all elements (including button and elements)

// Clicking a button or link will not Trigger the execution of any event handling function

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

// Remove all event bindings of the body element for all elements Processing function

// Clicking a button, clicking a link, or moving the mouse in/out of a link will not trigger the execution of any event processing function

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

Run the code (please copy other codes to the demo page to run)

In addition, the off() function can also remove only the event binding of the specified namespace.

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

alert("click-3") ;

});

$btn1.off("click.test"); // Remove click-2, click-3

// $btn1. off("click.foo"); // Remove click-1, click-3

// $btn1.off("click.foo.bar"); // Remove click-1

// $btn1.off("click"); // Remove all click event handlers (click-1, click-2, click-3)

// $btn1. off(".foo"); // Remove all event handlers containing namespace foo, not just click events

The above is the detailed content of Take you to understand the detailed usage of jQuery.off() function. For more information, please follow other related articles on the PHP Chinese website!