jquery in () method usage example detailed _jquery

This example analyzes the use of the jquery on () method. Share to everyone for your reference. The specific analysis is as follows:

The use of the JQuery on () method:

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

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 descendants of the selector element of the filter's triggering event. If the selector is NULL or omitted, when it reaches the selected element, the event is always triggered.
Data: To pass Event.data to the event handler when an event is triggered.
fn: The function to execute when the event is triggered. The value of false can also be abbreviated as a function, returning false.

The advantages of the JQuery on () method:

1, provides a unified binding event method

2, still provide the advantages of delegate (), of course, if necessary you can also use directly. Bind ()

Iii. comparison with. bind (),. Live (),. Delegate ():

1, actually. bind (),. Live (),. Delegate () is implemented by. On ().

Copy Code code as follows:

Bind:function (types, data, fn) {
Return This.on (types, NULL, data, FN);
},
Unbind:function (types, fn) {
Return This.off (types, NULL, FN);
},

Live:function (types, data, fn) {
JQuery (This.context). On (types, this.selector, data, FN);
return this;
},
Die:function (types, fn) {
JQuery (This.context). Off (types, This.selector | | "* *", FN);
return this;
},

Delegate:function (selector, types, data, fn) {
Return This.on (types, selector, data, FN);
},
Undelegate:function (selector, types, fn) {
(namespace) or (selector, types [, FN])
return arguments.length = = 1? This.off (Selector, "* *"): This.off (types, selector | | "* *", FN);
}

2. The cost of using. bind () is very large, it will hook the same event handler to all the matching DOM elements

3, do not use. Live (), it is no longer recommended, and there are many problems

4. Delegate () provides a good way to improve efficiency, and we can add an event-handling method to dynamically added elements.

5, we can use. On () to replace the above 3 methods

Iv. examples of using the JQuery on () method

1, Bind click event, use the Off () method to remove on () bound method

Copy Code code as follows:

$ (document). Ready (function () {
$ ("P"). On ("click", Function () {
$ (this). CSS ("Background-color", "pink");
});
$ ("button"). Click (function () {
$ ("P"). Off ("click");
});
});

2. Multiple events bind to the same function

Copy Code code as follows:

$ (document). Ready (function () {
$ ("P"). On ("MouseOver mouseout", function () {
$ ("P"). Toggleclass ("Intro");
});
});

3. Multiple event bindings different functions

Copy Code code as follows:

$ (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");
});
});

4. Binding Custom Events

Copy Code code as follows:

$ (document). Ready (function () {
$ ("P"). On ("Myownevent", Function (event, showname) {
$ (this). Text (ShowName + "!) What a beautiful name! "). Show ();
});
$ ("button"). Click (function () {
$ ("P"). Trigger ("Myownevent", ["Anja"]);
});
});

5. Pass data to function

Copy Code code as follows:

function HandlerName (event)
{
alert (event.data.msg);
}

$ (document). Ready (function () {
$ ("P"). On ("click", {msg: "Just clicked Me!"}, HandlerName)
});

6. Applicable to elements not created

Copy Code code as follows:

$ (document). Ready (function () {
$ ("div"). On ("click", "P", function () {
$ (this). Slidetoggle ();
});
$ ("button"). Click (function () {
$ ("<p>this is a new paragraph.</p>"). InsertAfter ("button");
});
});

I hope this article will help you with your jquery programming.