jquery on event jquery on implements binding multiple events

On the API jquery on introduction

On (EVENTS,[SELECTOR],[DATA],FN) overview

An event handler that is bound to one or more events on the selection element.

The On () method binds an event handler to the element in the currently selected jquery object. In jquery 1.7, the. On () method provides all the functionality required to bind an event handler. Help convert from the old jquery event method, see. bind (),. Delegate (), and. Live (). To remove the. On () bound events, see. Off (). To attach an event, run only once, and then delete yourself, see. One ()

Parameters

EVENTS,[SELECTOR],[DATA],FN V1.7

Events: One or more space-delimited event types and optional namespaces, such as "click" or "Keydown.myplugin".

selector: A selector string is used for the descendant of the selector element of the filter's triggering event. If you select < null or omit, the event is always triggered when it reaches the selected element.

data: Pass Event.data to the event handler when an event is triggered.

fn: The function that is executed when the event is triggered. A false value can also be a shorthand for a function that returns FALSE.

Events-map,[selector],[data] V1.7

events-map: A string representation of one or more space-delimited event types and optional namespaces that represent the handler for event binding.

selector: A selector string filters the selected element, and the descendant element of the selector invokes the handler. If the selection is empty or ignored, the event is always triggered when it reaches the selected element.

data: Pass Event.data to the event handler when an event is triggered.

Example

Describe:

Display a paragraph ' s text in the alert when it is clicked:

$ ("P"). On ("click", Function () {alert (the This). text ());});

Pass data to the event handler, which are specified here by name:

function MyHandler (event) {alert (Event.data.foo);} $ ("P"). On ("click", {foo: "Bar"}, MyHandler)

Cancel a form submit action and prevent the event from bubbling up by returning false:

$ ("form"). On ("Submit", false)

Cancel the default action by using. Preventdefault ().

$ ("form"). On ("Submit", function (event) {Event.preventdefault ();});

Stop submit events from bubbling without preventing form submit, using. Stoppropagation ().

$ ("form"). On ("Submit", function (event) {event.stoppropagation ();});

The JQuery on () method is an officially recommended way to bind events .

$ (selector). On (Event,childselector,data,function,map)

Several of the previously common methods that have been extended are as follows.

Bind ()

$ ("P"). Bind ("click", Function () {

Alert ("the paragraph was clicked.");

});

$ ("P"). On ("click", Function () {

Alert ("the paragraph was clicked.");

});

Delegate ()

$ ("#div1"). On ("click", "P", function () {

$ (this). CSS ("Background-color", "pink");

});

$ ("#div2"). Delegate ("P", "click", Function () {

$ (this). CSS ("Background-color", "pink");

});

Live ()

$ ("#div1"). On ("click", Function () {

$ (this). CSS ("Background-color", "pink");

});

$ ("#div2"). Live ("Click", Function () {

$ (this). CSS ("Background-color", "pink");

});

None of the above three methods are recommended after jQuery1.8, and the Live () method has been canceled by the official at 1.9, so it is recommended to use the on () method.

Tip: If you need to remove the method that is bound on (), you can use the off () method to process it.

$ (document). Ready (function () {

$ ("P"). On ("click", Function () {

$ (this). CSS ("Background-color", "pink");

});

$ ("button"). Click (function () {

$ ("P"). Off ("click");

});

});

Tip: If your event requires only one operation at a time, you can use the one () method

$ (document). Ready (function () {

$ ("P"). One ("click", Function () {

$ (this). Animate ({fontSize: "+=6px"});

});

});

Trigger () Binding

$ (selector). Trigger (Event,eventobj,param1,param2,...)

$ (document). Ready (function () {

$ ("input"). Select (function () {

$ ("input"). After ("Text marked!");

});

$ ("button"). Click (function () {

$ ("input"). Trigger ("select");

});

});

Multiple events bound to the same function

$ (document). Ready (function () {

$ ("P"). On ("MouseOver mouseout", function () {

$ ("P"). Toggleclass ("Intro");

});

});

Multiple events bind different functions

$ (document). Ready (function () {

$ ("P"). On ({

Mouseover:function () {$ ("body"). CSS ("Background-color", "Lightgray");},

Mouseout:function () {$ ("body"). CSS ("Background-color", "LightBlue");},

Click:function () {$ ("body"). CSS ("Background-color", "Yellow");}

});

});

Binding Custom Events

$ (document). Ready (function () {

$ ("P"). On ("Myownevent", Function (event, showname) {

$ (this). Text (ShowName + "! What a beautiful name! "). Show ();

});

$ ("button"). Click (function () {

$ ("P"). Trigger ("Myownevent", ["Anja"]);

});

});

Passing data to a function

function HandlerName (event)

{

alert (event.data.msg);

}

$ (document). Ready (function () {

$ ("P"). On ("click", {msg: "You just clicked Me!"}, HandlerName)

});

Applies to elements that are not created

$ (document). Ready (function () {

$ ("div"). On ("click", "P", function () {

$ (this). Slidetoggle ();

});

$ ("button"). Click (function () {

$ ("<p>this is a new paragraph.</p>"). InsertAfter ("button");

});

});

A few days ago in the "Basicjquery Tutorial", see the event delegate time, about the live () method is not very detailed, went to search about Live () and delegate ().

Then saw live in one place () has been removed, embarrassed, and then went to see the latest JQ source code, sure enough to be removed, is now 1.9.1 version, do not know which version of Live () was removed before, ashamed Ah, did not notice.

See the source code found that bind () and delegate () are implemented by on (). on () is described as follows:

Copy the code code as follows:

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

A simple event binding such as $ (' button '). on (' click ', Function () {}); and bind () no two.

When you need to bind events to more elements, the priority is given to event delegation, which can bring a performance benefit. Like what:

For example, if the Click event is bound to a Document object, the click event of any element on the page bubbles to the Document object for processing.

Notice that. on The Second optional parameter in the description of (): Selector. For example, add the second parameter, the selector button:

Results:

When the event bubbles to the Document object, the target of the detection event, if matched with the incoming selector (this is the button), triggers the event, otherwise it is not fired.

Attention. on () You can also receive an object parameter, which is an event type and the property value is an event handler. Here is an example of an official document:

Finally, the original Live () method, the handler function is the default binding on the Document object can not be changed, if the DOM nesting structure is very deep, event bubbling through a large number of ancestor elements will lead to a large performance loss. and use. on () method, the event will only be bound to an element that matches the selector expression of the $ () function (in my example above, in order to simply bind to document), so you can pinpoint the part of the page, and the overhead of event bubbling can be reduced. Delegate () and on () are, after all, implemented with on ():

jquery on event jquery on implements binding multiple events