Jquery.on () function explanation

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 on some of the required data to the event handler.
Starting with jquery 1.7, the On () function provides all the functionality required to bind an event handler to unify the previous event functions such as bind (), delegate (), and Live ().

Even if the newly added element is executed after the on () function, the bound event handler is 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 sequentially in the order in which it is 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.

The function belongs to the jquery object (instance).
Grammar
JQuery 1.7 adds this function. It is mainly used in the following two forms of usage:

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

Usage Two:
Jqueryobject.on (Eventsmap [, selector] [, data])

Parameter description
Events string Type one or more event types separated by spaces and optional namespaces, such as "click", "Focus click", "Keydown.myplugin".
Eventsmap an Object object, with each property corresponding to the event type and optional namespace (parameters 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 stream reaches the current element).
Data optional/any type of triggering event, you need to pass the Event.data to the event handler for any of the information.
Handler the event handler specified by the function type.

For the optional namespaces in the parameters events, refer to the following sample code.
As for the parameter selector, you can simply understand that if the parameter equals null or is omitted, the current matching element is bound to the event, otherwise it is the element binding event in the descendant element of the current matching element that conforms to the selector selector.

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

On () also passes a parameter to handler: An Event object that represents the current event.

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

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

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

Important NOTES:
The On () function does not bind event handlers for elements that match the current jquery object, but instead binds event handlers for elements in their descendant elements that conform to the selector selector parameter. The On () function does not directly bind events to these descendant elements, but instead delegates them to the matching elements of the current jquery object. Because of the DOM 2-level event flow mechanism, when the descendant element selector triggers an event, the event is passed to all its ancestor elements in the event bubbling, and when the event is passed to the current matching element, jquery determines which descendant element is triggering the event, if the element conforms to the selector selector , jquery captures the event and executes the bound event handler.

Example & Description
As an example of a click event ("click"), the following is the general use of event functions in jquery (some functions also have other forms of usage, which are not listed here):

Here the selector selector is used to specify the element that can trigger the event
The selector ancestor here should be the ancestral element of selector, and the event triggered by selector can be captured in the event stream by its ancestral elements, triggering the event in the form of "proxy".

JQuery 1.0+ (1.4.3+ support parameter data)
$ ("selector"). Click ([Data,] handler);

JQuery 1.0+ (1.4.3+ support parameter data)
$ ("selector"). Bind ("click" [, Data], handler);

JQuery 1.3+ (1.4+ support parameter data)
$ ("selector"). Live ("Click" [, Data], handler);

JQuery 1.4.2+
$ ("ancestor"). Delegate ("selector", "click" [, Data], handler);

JQuery 1.7+
$ ("ancestor"). On ("click", "selector" [, data], handler);

Please refer to the following initial HTML code:

<div id= "N1" >
<p id= "N2" ><span>CodePlayer</span></p>
<p id= "N3" ><span> focus on programming development technology sharing </span></p>
<em id= "N4" >http://www.baidu.com</em>
</div>
<p id= "N5" >Google</p>

We bind a fixed-point event for all <p> elements in <div>:

Binds the Click event handler for all P elements in the DIV
Only N2, N3 can trigger the event
$ ("div"). On ("click", "P", function () {
This here points to the P element that triggers the Click event (Element)
Alert (This). text ());
});

If you want to bind all the <p> elements, you can write the following jquery code:

Bind the Click event handler for all P elements (note: The selector parameter is omitted here)
N2, N3, N5 can trigger this event
$ ("P"). On ("click", Function (event) {
This here points to the P element that triggers the Click event (Element)
Alert (This). text ());
});

In addition, we can bind multiple events at the same time, and pass some additional data for the event handler, which we can handle by using jquery for the event event object passed in by the events handler function:

vardata = {id:5, name: "Zhang San" };//bind MouseEnter MouseLeave two events for N5 and pass in additional data for it//additional data can be any type$ ("Body"). On ("MouseEnter MouseLeave", "#n5", data,function(event) {var$me = $ ( This); varoptions = Event.data;//This is the incoming additional data.    if(Event.type = = "MouseEnter"{$me. html ("Hello," + Options.name + "!"); }Else if(Event.type = = "MouseLeave"{$me. html ("Good-bye!"); }           });

Additionally, the binding event remains in effect even if the eligible element is newly added after the On () function is executed. As an example of the initial HTML code, we can write the following jquery code:

Binds the Click event handler for all P elements in the DIV
Only N2, N3 can trigger the event
$ ("div"). On ("click", "P", function (event) {
Alert (This). text ());
});

The added N6 can also trigger the Click event above, as it is also the P element in the DIV
$ ("#n1"). Append (' <p id= ' N6 "> The click event of the above binding also takes effect on this element!</p> ');

The Parameters events also support additional namespaces for event types. When you bind multiple event handlers of the same type to the same element. Using namespaces, you can limit the range that is triggered or removed when an event is triggered or removed.

function ClickHandler (event) {
Alert ("Namespace on Trigger: [" + Event.namespace + "]");
}

var $p = $ ("P");

A: Bind the Click event for all P elements, defined under Foo and bar two namespaces
$p. On ("Click.foo.bar", ClickHandler);

B: Bind the Click event for all P elements, defined under the test namespace
$p. On ("Click.test", ClickHandler);

var $n 2 = $ ("#n2");

Trigger All Click events
$n 2.trigger ("click"); Triggers A and B (Event.namespace = "")

Triggers the Click event defined under the Foo namespace
$n 2.trigger ("Click.foo"); Trigger A (Event.namespace = "foo")
Trigger the Click event defined under the Bar namespace
$n 2.trigger ("Click.bar"); Trigger A (Event.namespace = "Bar")
Triggers a Click event that defines both the Foo and bar two namespaces
$n 2.trigger ("Click.foo.bar"); Trigger A (Event.namespace = "Bar.foo")

Trigger the Click event defined under the test namespace
$n 2.trigger ("Click.test"); Trigger B (event.namespace = "Test")

Removes all P elements defined by the Click event handler in the Foo namespace
$p. Off ("Click.foo"); Remove a

The argument eventsmap of the On () function is an object that can specify multiple event type-handler functions in the form of a property-value. The corresponding sample code is as follows:

var data = {id:5, name: "Zhang San" }; var events = {    function(event) {        $ (this). html ("Hello," + Event.data.name + "!" );           },        function(event) {        $ (this). HTML ("Good-bye!") );    }       }; // bind MouseEnter MouseLeave two events for N5 and pass in additional data for it("body"). On (Events, "#n5", data);

Jquery.on () function explanation