Introduction to jquery on () binding events and off () unbinding events

The following is an article about jquery's on () binding event and off () unbinding event. I think this is quite good. Now I will share it with you and give you a reference. Let's take a look at the off () function to remove the event handler for one or more events bound to the element.

The off () function is mainly used to remove the event handler function bound by the on () function.

This function is a jQuery object (instance ).

Syntax

This function is added to jQuery 1.7. It mainly has the following two forms of usage:

Usage 1:

JQueryObject. off ([events [, selector] [, handler])

Usage 2:

JQueryObject. off (eventsMap [, selector])

Parameters

The Return Value of the off () function is of the jQuery type, and the current jQuery object itself is returned.

In fact, the parameters of the off () function are all filtering conditions. Only event processing functions that match all parameter conditions are removed. The more parameters, the more conditions, and the smaller the scope to be removed.

Code example of the off () method:

Easy to ignore: the unbinding event of the removed element. The selector must be consistent with the selector used when the event is bound on.

Html code

CodePlayer

Jquery code executed during page loading

Function btnClick1 () {alert (this. value + "-1");} function btnClick2 () {alert (this. value + "-2");} var $ body = $ ("body"); // bind to button 1 and click $ body. on ("click", "# btn1", btnClick1); // bind to button 2 and click $ body. on ("click", "# btn2", btnClick2); // bind the click, mouseover, mouseleave event $ body to all a elements. on ("click mouseover mouseleave", "a", function (event) {if (event. type = "click") {$ body. off ("click", "# btn1"); // cancels the binding event of btn1. Alert ("Click event"); alert ("ddd");} else if (event. type = "mouseover") {symbol (this(.css ("color", "red");} else {symbol (this..css ("color", "blue ");}}); // remove the event processing function btnClick2 bound to the click event of all button elements from the body element. // click the button, and btnClick1 still runs $ body. off ("click", ": button", btnClick2); // click button 1 and no event processing function is executed. // $ body. off ("click", "# btn1"); // Note: $ body. off ("click", ": button"); the click event of btn1 cannot be removed. The selector specified by the off () function must be consistent with the selector passed in by the on () function. // Remove all handler functions bound to the click event of all elements (including buttons and elements) of the body element. // click a button or link, will not trigger the execution of any event processing function // $ ("body "). off ("click"); // remove all handler functions bound to any event of all elements from the body element. // click the button, or click the link or move the cursor to/from the link, will not trigger the execution of any event processing function // $ ("body "). off ();

The on () function is used to bind an event handler function to one or more events of a specified element.

In addition, you can transmit the required data to the event processing function.

Since jQuery 1.7, The on () function provides all the functions required to bind the event handler. It is used to replace the previous bind (), delegate (), live () and other event functions.

Even the newly added element after the on () function is executed, the bound event processing function is also valid as long as it meets the conditions.

In addition, this function can bind multiple event handlers to the same element and event type. When an event is triggered, jQuery executes the Bound event processing function in sequence according to the binding sequence.

To delete events bound by on (), use the off () function. If you want to attach an event, run it only once, and then delete yourself, use the one () function.

This function is a jQuery object (instance ).

Syntax

This function is added to jQuery 1.7. It mainly has the following two forms of usage:

Usage 1:

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

Usage 2:

JQueryObject. on (eventsMap [, selector] [, data])

Parameters

For the optional namespace in the events parameter, see the following sample code.

With regard to the selector parameter, you can simply consider it as: If the parameter is null or omitted, It is the binding event of the current matching element; otherwise, an event is bound to the element that matches the selector in the child element of the currently matched element.

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

On () also passes in a parameter for handler: The Event object of the current Event.

The Return Value of the handler parameter is the same as that of the processing function of the DOM native event. For example, if the event handler function of the "submit" event returns false, it can block form submission.

If the event handler function handler only returns false values, you can directly set handler to false.

Return Value

The Return Value of the on () function is of the jQuery type, and the current jQuery object itself is returned.

Important:

The on () function does not bind event handlers to the elements that match the current jQuery object, but to the elements that match the selector parameter of their child elements. The on () function does not directly bind events to these child elements, but delegates them to the matching elements of the current jQuery object for processing. Because of the DOM 2-level event stream mechanism, when the descendant element selector triggers an event, the event will pass all its ancestor elements in the event bubble, when the event is passed to the current matching element, jQuery will determine which descendant element triggers the event. If the element conforms to the selector, jQuery will capture the event and execute the Bound event processing function.

The above is a simple introduction to jquery's on () binding event and off () unbinding event. I hope you can support PHP ~

For more information about jquery's on () binding events and off () unbinding events, refer to PHP's Chinese website!