Detailed explanation of jQuery.off() function usage

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:

a1db7bf44172eb60584b3c8ef74d8475

c9c0650f28a0cd3208b5e0cda6b7b622

86f02faad3009b4d4940416edcffa907

First, we bind events to the above button and 3499910bf9dac5ae3c52d5ede7383485 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");
// 为所有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( );

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"); // 移除click-2、click-3
// $btn1.off("click.foo");  // 移除click-1、click-3
// $btn1.off("click.foo.bar");  // 移除click-1
// $btn1.off("click");  // 移除所有click事件处理函数(click-1、click-2、click-3)
// $btn1.off(".foo");  // 移除所有包含命名空间foo的事件处理函数，不仅仅是click事件

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