On jquery () binding events and off () Unbind events _jquery

The off () function removes the event handler for one or more events bound by an element.

The off () function is primarily used to disassociate the event handler functions that are bound by the on () function.

This function belongs to the jquery object (instance).

Grammar

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

Usage One:

Jqueryobject.off ([events [, selector] [, Handler]])

Usage Two:

Jqueryobject.off (Eventsmap [, selector])

Parameters

Parameters	Description
Events	Optional/string type one or more space-delimited event types and optional namespaces, such as "click", "Focus click", "Keydown.myplugin".
Eventsmap	Object type object with each property corresponding to the event type and optional namespace (parameter events), and 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 parameter is null or omitted, the current element itself binds the event (the actual trigger may also be a descendant element, as long as the event flow reaches the current element).
Handler	An optional/function type specifies the event handler function.

The off () function removes the event handler handler for events events that are bound to selector for descendant elements on the current matching element.

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

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

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

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

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

In fact, the off () function's arguments are all filter criteria, and only event handlers that match all parameter conditions are removed. The more arguments you have, the more constraints you have, the smaller the scope of the removal.

code example for the Off () method:

Easily overlooked point: the binding event for the lifted element off, where the selector must match the selector used in the on binding event.

HTML code

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

jquery code executed when the page loads

function BtnClick1 () {alert (This.value + "-1");}

function BtnClick2 () {alert (This.value + "-2");}

var $body = $ ("body");

Point to Button 1 to $body. On ("click", "#btn1", btnClick1);

Point to Button 2 to $body. On ("click", "#btn2", BtnClick2); Binds the click, MouseOver, MouseLeave event $body for all a elements. On ("Click MouseOver mouseleave", "a", function (event) {if (Event.type = = Click ") {$body. Off (" click "," #btn1 ");//Cancel BTN1 binding event.
    Successfully executed alert ("click event");
  Alert ("ddd");
  }else if (Event.type = = "MouseOver") {$ (this). CSS ("Color", "red");
    
  }else{$ (this). CSS ("Color", "blue");


}
});


Removes the event handler BtnClick2//Click button that the BODY element binds to the Click event of all button elements, and BtnClick1 executes $body. Off ("Click", ": Button", BtnClick2);


Click button 1 to not perform any event handler functions//$body. Off ("click", "#btn1"); Note: $body. Off ("Click", ": Button");


Cannot remove BTN1 Click event, the selector specified by the off () function must be the same as the selector passed in on () function.


Removing all of the handler functions/click buttons or links that the BODY element binds to all elements (including button and <a> element) Click events does not trigger the execution of any event handler//$ ("body"). Off ("click"); Removes all processing functions/Click buttons that the BODY element binds to any event for all elements.Or click on the link or mouse to move in/out of the link, does not trigger the execution of any event handler function//$ ("body"). Off (); 

The On () function is used to bind an event handler function for one or more events of the specified element.

In addition, you can also pass additional data to the event handler function.

Starting with jquery 1.7, the On () function provides all the functionality required to bind an event handler to replace event functions such as the previous bind (), delegate (), Live ().

Even if the newly added element after the on () function is executed, the bound event-handler function is also valid as long as it meets the criteria.

In addition, the function can bind multiple event handlers for the same element, the same event type. When the event is triggered, jquery executes the bound event handler in the order in which they are bound.

To remove an event that is bound by on (), use the Off () function. If you want to attach an event, execute only once, and then delete yourself, use the one () function.

This function belongs to the jquery object (instance).

Grammar

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

Usage One:

Jqueryobject.on (events [, selector] [, data], handler)

Usage Two:

Jqueryobject.on (Eventsmap [, selector] [, data])

Parameters

parameter	description
events	object Type an Object object with each property corresponding to the event type and optional namespace (parameter events ), and the property values correspond to the bound event-handling functions (parameter handler ).
selector	null or omitted, the current element itself binds the event (the actual trigger may also be a descendant element, as long as the event flow reaches the current element).
data	optional/arbitrary When a type triggers an event, any data that needs to be passed through Event.data to the event handler function.
handler	function type specified event handling function .

For optional Namespaces in parameter events, refer to the following sample code.

As for the parameter selector, you can simply understand that if the argument equals null or omitted, the event is bound for the current matching element, or the element binding event for the descendant element of the current matching element that conforms to the selector selector.

The this in the parameter handler points to the DOM element in the descendant element of the current matching element that triggers the event. If the parameter selector equals null or is omitted, this points to the current matching element (that is, the element).

On () also passes an argument for handler: The event object that represents the current occurrence.

The return value of the parameter handler is consistent with the function return value of the DOM native event. For example, the event-handling function of the submit (form submission) event returns false, which prevents the form from being submitted.

If the event handler function handler only returns a value of FALSE, you can set the handler directly to false.

return value

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

Important NOTE:

The On () function is not an element-bound event handler that matches the current jquery object, but rather an element-bound event handler that conforms to the selector selector parameter in their descendant elements. Instead of binding events to these descendant elements directly, the on () function is delegated to the matching elements of the current jquery object. Because of the DOM Level 2 event flow mechanism, when the descendant element selector triggers an event, the event is passed to all of its ancestor elements in event bubbling, and when the event is passed to the current matching element, jquery determines which descendant element triggers the event if the element conforms to the selector selector , jquery captures the event to perform the bound event-handler function.

The above is a small series for everyone to talk about jquery on () binding events and off () Unbind event full content, I hope we support cloud-Habitat Community ~