Detailed explanation of the usage and precautions of jQuery.unbind() function

The

unbind() function is used to remove the event handling function of one or more events bound to the matching element.

The unbind() function is mainly used to unbind the event processing function bound by the bind() function.

This function belongs to the jQuery object (instance).

Syntax

The unbind() function mainly has the following two forms of usage:

Usage 1:

jQueryObject.unbind( [ events [, handler ]] )

Remove the event handler function handler bound to the events event of the current matching element.

Usage 2:

jQueryObject.unbind( eventObject )

is the Event object passed in by the specified event processing function, used to remove the corresponding event processing function.

Parameters

Parameter Description

events Optional/String Type One or more event types separated by spaces and optional Namespace , such as "click", "focus click", "keydown.myPlugin".

handler Optional/event handling function specified by Function type.

eventObject Object class is an Event object, used to remove the event processing function passed in to the object.

jQuery 1.4.3 newly supports the parameter handler which can be false. The event handler function is used to remove the bound event when the handler parameter is false.

If the parameter handler is omitted, all event handlers bound to events of the specified type matching the element will be removed.

If all parameters are omitted, it means to remove any event handlers on the matching element for any event type bound to any element.

Return value

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

In fact, the parameters of the unbind() 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:

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

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

function btnClick1(){
    alert( this.value + "-1" );
}
function btnClick2(){
    alert( this.value + "-2" );
}
var $buttons = $(":button");
// 为所有button元素的click事件绑定事件处理函数btnClick1
$buttons.bind( "click", btnClick1 );
// 为所有button元素的click事件绑定事件处理函数btnClick2
$buttons.bind( "click", btnClick2 );
// 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数
$("a").bind( "click mouseover mouseleave", function(event){
    if( event.type == "click" ){
        alert("点击事件");
    }else if( event.type == "mouseover" ){
        $(this).css("color", "red");
    }else{
        $(this).css("color", "blue");       
    }
});
// 移除为所有button元素的click事件绑定的事件处理函数btnClick2
// 点击按钮，只执行btnClick1
$buttons.unbind("click", btnClick2);
// 移除为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)
// 点击按钮，不会执行任何事件处理函数
// $buttons.unbind("click");
// 只移除为btn1元素的click事件绑定的所有事件处理函数
 // btn2元素的click事件仍然有效
// $("#btn1").unbind("click");
// 移除为所有a元素的任何事件绑定的所有处理函数
// 点击链接，或用鼠标在链接上移入、移出，都不会触发执行任何事件处理函数
// $("a").unbind( );

unbind() function can also remove functions based on the incoming event object. The following jQuery code only allows the prompt box to pop up when the button [Click 1] is clicked for the first time, and then removes the click event immediately.

var $btn1 = $("#btn1");
$btn1.bind("click", function(event){
    alert("只执行一次!");
    $(this).unbind( event ); // 移除当前事件处理函数  
});
此外，unbind()函数还可以只移除指定命名空间的事件绑定。
var $buttons = $(":button");
// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click.foo.bar", function btnClick1(){
    alert( "click-1" );
} );
// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click.test.bar", function btnClick1(){
    alert( "click-2" );
} );
// 移除包含命名空间foo的click事件绑定的事件处理函数
$buttons.unbind( "click.foo" ); // 移除click-1
//移除包含命名空间bar的click事件绑定的事件处理函数
// $buttons.unbind( "click.bar" ); // 移除click-1和click-2
//移除包含命名空间test的click事件绑定的事件处理函数
// $buttons.unbind( "click.test" ); // 移除click-2
// 移除所有button元素的click事件绑定的所有事件处理函数
// $buttons.unbind("click"); // 移除click-1和click-2

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