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

Source: Internet
Author: User

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).


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 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.