An analysis of the jquery Unbind () method removes an element-bound event _jquery

The Unbind () method removes an element-bound event, which is called in the following format:

$ (selector). Unbind (Event,fun)

Where parameter event indicates the name of the event that needs to be removed, multiple event names are separated by spaces, and the fun parameter is the name of the function that was invoked when the event was executed.

Grammar

The Unbind () function has the following two main forms of usage:

Usage One:

Jqueryobject.unbind ([events [, Handler]])

Removes the event handler function handler of the events event binding for the current matching element.

Usage Two:

Jqueryobject.unbind (EventObject)

An event object that is passed in for the specified event-handler function to remove the corresponding event-handler function.

Parameters

Parameter description

Events optional/string Type one or more space-delimited event types and optional namespaces, such as "click", "Focus click", "Keydown.myplugin".

Handler the event handler function specified by the optional/function type.

The EventObject object type is an event object that is used to remove the event handler that is passed in to the object.

The JQuery 1.4.3 New support parameter handler can be false. An event handler function that handler the value of the parameter to be false when the binding event is removed.

If the argument handler is omitted, all event-handler functions bound to the event of the specified type of the matching element are removed.

If all parameters are omitted, any event-handling functions that remove any event types that are bound to any element on the matching element are removed.

return value

The return value of the Unbind () function is the jquery type, returning the current jquery object itself.

In fact, the parameters of the Unbind () function are all filters, and only the event handlers that match all parameter conditions will be removed. The more arguments you have, the more constraints you have, the smaller the scope of the removal.

Example & Description

Please refer to the initial HTML code below:

<input id= "btn1" type= "button" value= "clicks 1"/> 
<input id= "btn2" type= "button" value= "click 2"/> 
<a id= "A1" href= "#" >CodePlayer</a> 

First, we bind the event for the button and <a> element above and then use the Unbind () function to unbind the event, and the corresponding code is as follows:

function BtnClick1 () {alert (This.value + "-1"); 
function BtnClick2 () {alert (This.value + "-2"); 
 
var $buttons = $ (": Button"); 
 
The Click event binding event handler for all button elements BtnClick1 $buttons. bind ("click", BtnClick1); 
 
The Click event binding event handler for all button elements BtnClick2 $buttons. bind ("click", BtnClick2); Bind event Handling function $ ("a") for all A-element's click, MouseOver, MouseLeave events. Bind ("Click MouseOver mouseleave", function (event) {if (event.t 
  ype = = "click") {Alert ("click event"); 
  }else if (Event.type = = "MouseOver") {$ (this). CSS ("Color", "red");    
  }else{$ (this). CSS ("Color", "blue"); 
 
 
} 
}); 
 
 
Removes the event handler BtnClick2//Click button for all button element's Click events and executes only btnClick1 $buttons. Unbind ("click", BtnClick2); 
 
 
Removes all event-handling functions (BTNCLICK1 and BtnClick2) that are bound for the Click event of all button elements and do not perform any event handler functions//$buttons. Unbind ("click"); 
 
Only the Click event for all event handlers/BTN2 elements bound for the BTN1 element's Click event is still valid//$ ("#btn1"). Unbind ("click"); Removing all handler functions bound for any event for all a elements/click links, or moving and removing them with the mouse will not trigger the execution of any event handler//$ ("a"). Unbind ();  

The unbind () function can also remove functions based on the incoming event object. The following jquery code only allows the pop-up prompt when the first click of the button "click 1" and immediately removes the Click event.

var $btn 1 = $ ("#btn1"); 
$BTN 1.bind ("click", Function (event) { 
  alert ("only once!"); 
  $ (this). Unbind (event); Remove Current event handler  
}); 
In addition, the Unbind () function can also remove only the event bindings for the specified namespace. 
 
var $buttons = $ (": Button"); 
 
The Click event binding event handler for all button elements 
$buttons. bind ("Click.foo.bar", function BtnClick1 () { 
  alert ("Click-1"); 
} ); 
 
The Click event binding event handler for all button elements 
$buttons. bind ("Click.test.bar", function BtnClick1 () { 
  alert ("Click-2"); 
} ); 
 
 
Removes the event handler for the Click event binding containing namespace Foo 
$buttons. Unbind ("Click.foo");//Remove click-1 
 
// Removes the event handler function 
/$buttons. Unbind ("Click.bar") with the Click event binding containing the namespace bar;//Remove click-1 and click-2 
 
// Removes the event handler function 
/$buttons. Unbind ("Click.test") with the Click event binding containing the namespace test;//Remove click-2 
 
// Removes all event handlers/$buttons. Unbind ("click") of all button element's Click event bindings 
;//removal of click-1 and click-2 

The above analysis of the jquery Unbind () method to remove element binding event is small series to share all the content, hope to give you a reference, but also hope that we support cloud habitat community.