jquery on () Bind event and off () Unbind event

off()function is used to remove an event handler for one or more events bound by an element .

off()Functions are primarily used to unbind event handlers that are bound by the on () function.

The function belongs to an jQuery object (instance).

Grammar

JQuery 1.7 adds this function. It is mainly used in the following two forms of usage:

Usage One :

Jqueryobject.  Off([[,][,]])         

Usage two :

Jqueryobject.  Off([,])     

Parameters

parameters	Description
events	optional/string type one or more event types separated by spaces and optional namespaces, such as "click", "Focus click", "Keydown.myplugin".
eventsmap	object Type an Object object with each property corresponding to the event type and optional namespace (parameter events ), the property value corresponds to the event handler function (parameter handler ) of the binding.
selector	optional/string Type a jquery selector that specifies which descendant elements can trigger the bound event. If the argument is null or omitted, the current element itself is bound to an event (the actual trigger may also be a descendant element as long as the event flow reaches the current element).
handler	optional/function type specified event handling function .

off()The function removes selector the event handler for the event that is bound to the descendant element on the currently matched element events handler .

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

selectorThe parameter must be consistent with the selector passed in when the binding is added through the on () function.

If the argument is omitted handler , all event handlers that are bound by the specified event type are removed from specified elements.

If all arguments are omitted, any event handlers that remove any event types that are bound to any element on the current element are removed.

return value

off()The return value of the function is the jquery type, which returns the current jquery object itself.

In fact, the off() parameters of the function are all filters, and only event handlers that match all of the parameter conditions will be removed. The more parameters, the more qualified, and the smaller the range is removed.

code example of the Off () method:

Easy-to-ignore point: The binding event of the off element, where the selector must be consistent with the selector used when the on binding event occurs.

HTML code

1 <inputID= "BTN1"type= "button"value= "Click 1" />2 <inputID= "BTN2"type= "button"value= "Click 2" />3 <aID= "A1"href="#">Codeplayer</a>

View Code

jquery code executed when the page loads

1 functionBtnClick1 () {2Alert This. Value + "-1" );3 }4 5 functionBtnClick2 () {6Alert This. Value + "-2" );7 }8 9 var$body = $ ("Body");Ten  One //give the button 1 to bind the point hit A$body. On ("click", "#btn1", btnClick1); -  - //give the button 2 to bind the point hit the$body. On ("click", "#btn2", BtnClick2); -  - //bind the Click, MouseOver, MouseLeave events for all a elements -$body. On ("Click MouseOver mouseleave", "a",function(event) { +     if(Event.type = = "click" ){ -$body. Off ("click", "#btn1");//cancels the BTN1 binding event. Successful execution +Alert ("Click event"); AAlert ("DDD"); at}Else if(Event.type = = "MouseOver" ){ -$( This). CSS ("Color", "red"); -}Else{ -$( This). CSS ("Color", "blue"); -          -     } in }); -  to  + //removes the event handler for the Click event binding of the BODY element for all button elements BtnClick2 - //Click the button, BtnClick1 still execute the$body. Off ("Click", ": Button", BtnClick2); *  $ Panax Notoginseng //Click button 1 to not perform any event handler functions - //$body. Off ("click", "#btn1"); the  +  A //Note: $body. Off ("Click", ": Button"), the BTN1 Click event cannot be removed, and the selector specified by the off () function must match the selector passed in by the On () function.  the  +  - //removes all handlers for the Click event binding of the BODY element for all elements (including button and <a> element) $ //clicking a button or link does not trigger any event handlers to execute $ //$ ("body"). Off ("click"); -  -  the //removes all handler functions for any event binding of the BODY element for all elements - //clicking a button, or clicking a link or moving the mouse over/out of a link, does not trigger any event handlers to be executed.Wuyi //$ ("body"). Off ();

View Code

jquery on () Bind event and off () Unbind event