"go" jQuery on () selector function

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

To remove on() an event through binding, 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 an jQuery object (instance).

Grammar

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

Usage One :

1 jqueryobject.on (events [, selector] [, data], handler)

Usage two :

1 jqueryobject.on (eventsmap [, selector] [, data])

Parameters

Parameters	Description
Events	String type one or more space-delimited event types and optional namespaces, such as "click", "focus click", "keydown.myplugin".
Eventsmap	An object object that has each property corresponding to the event type and optional namespace (parameter events ) that corresponds to the event handler (parameter) of the binding handler .
Selector	optional/string Type a jquery selector that specifies which descendant elements can trigger the bound Event. If the argument is null or is 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).
Data	When an optional/arbitrary type triggers an event, any data that is passed to the event handler via Event.data is Required.
Handler	The function type specifies the event Handler.

For the events optional namespaces in the parameters, refer to the sample code at the Bottom.

With respect to parameters selector , you can simply understand that if the argument is equal null or omitted, the current matching element is bound to the event, otherwise the selector element binding event in the descendant element of the current matching element conforms to the Selector.

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

on()handleran Event object that represents the current event is also passed as a parameter.

handlerThe return value of the parameter is consistent with the return value of the handler function for the native event of the DOM. 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 is just a return false value, it can be handler set directly to false .

return value

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

Important Notes :

If you pass theselectorparameter, Thenon()function andis notbinds event handlers for the elements that match the current jquery object, but instead binds the event handler to the element in their descendant element that conforms to selector the selector parameter. on() instead of binding events directly for these descendant elements, the function delegates to the matching elements of the current jquery object to Handle. Because of the DOM 2-level event flow mechanism, when a descendant element selector fires an event, the event is passed to all its ancestor elements in the event bubbling, and when the event stream passes to the current matching element, jquery determines which descendant element triggered 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):

1 //here the selector selector is used to specify the element that can trigger the event2 //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". 3 4 //jQuery 1.0+ (1.4.3+ support parameter Data)5$ ("selector"). Click ([data,] handler);6 7 //jQuery 1.0+ (1.4.3+ support parameter Data)8$ ("selector"). Bind ("click")[, data], handler);9 Ten //jQuery 1.3+ (1.4+ support parameter Data) one$ ("selector"). Live ("click")[, data], handler); a  - //jQuery 1.4.2+ -$ ("ancestor"). Delegate ("selector", "click"[, data], handler); the  - //jQuery 1.7+ -$ ("ancestor"). on ("click", "selector" [, data], handler);

Please refer to the following initial HTML code:

1 <div id= "n1" >2     <p id= "n2" ><span>CodePlayer</span></p>3      <p id= "n3" ><span> focus on programming development technology sharing </span></p>4     <em id= "n4" >http: // www.365mini.com</em> 5 </div>6 <p id= "n5" >Google</p>

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

1 // binds the Click event handler for all P elements in the div 2 // only n2, N3 can trigger the event 3 function () {4     // This here points to the P element that triggers the Click event (element) 5     Alert (this). text ()); 6 });

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

1 // bind the Click event handler for all P elements (note: the selector parameter is omitted Here) 2 // n2, n3, N5 can trigger this event 3 function (event) {4//  This here points to the P element (element) that triggers the Click event5     alert ($ (  This). text ()); 6 });

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

1 vardata = {id:5, name: "zhang san" };2 3 //bind MouseEnter MouseLeave two events for N5 and pass in additional data for it4 //additional data can be any type5$ ("body"). on ("mouseenter mouseleave", "#n5", data,function(event) {6     var$me = $ ( this);7     varoptions = event.data;//This is the incoming additional Data.8     if(event.type = = "mouseenter"){9$me. HTML ("hello," + options.name + "!")); Ten}Else if(event.type = = "mouseleave" ){ one$me. HTML ("good-bye!"));  a     }            -});

In addition, even if the qualifying element is on() newly added after the function executes, the binding event is still valid for it. As an example of the initial HTML code, we can write the following jquery code:

 1  //  2  // Span style= "color: #008000;" > only n2, N3 can trigger the event  3  $ ("div"). on ("click", "p", function   4  alert ($ (this   5  });  6  //   8  $ ("#n1"). Append (' <p id= ' N6 "> The Click event of the above binding also takes effect for this element!</p> '); 

eventsThe parameter also supports attaching additional namespaces for the event Type. 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.

1 functionClickHandler (event) {2Alert ("namespace on Trigger: [" + event.namespace + "]");3 }4 5 var$p = $ ("p");6 7 //A: Bind the Click event for all P elements, defined under Foo and bar two namespaces8$p. on ("click.foo.bar", clickhandler);9 Ten //B: Bind the Click event for all P elements, defined under the test namespace one$p. on ("click.test", clickhandler); a  - var$n 2 = $ ("#n2"); -  the //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") a //triggers a Click event that defines both the Foo and bar two namespaces at$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 in$p. off ("click.foo");//Remove a -  toThe argument eventsmap of the on () function is an object that can specify multiple event Type-handler functions in the form of "property-value". The corresponding sample code is as Follows: +  - vardata = {id:5, name: "zhang san" }; the  * varEvents = { $"mouseenter":function(event) {Panax Notoginseng$( this). HTML ("hello," + event.data.name + "!"));  -     }, the      +"mouseleave":function(event) { a$( this). HTML ("good-bye!")); the     }        + }; -  $ //bind MouseEnter MouseLeave two events for N5 and pass in additional data for it $$ ("body"). on (events, "#n5", data);

/*========================================

Original Address: http://www.365mini.com/page/jquery-on.htm

========================================*/

"go" jQuery on () selector function