Examples of on () method usage in jQuery, and jquery instances

Source: Internet
Author: User

Examples of on () method usage in jQuery, and jquery instances

This document analyzes the usage of the jQuery on () method. Share it with you for your reference. The specific analysis is as follows:

I. Use of the jQuery on () method:
 
On (events, [selector], [data], fn)
 
Events: one or more event types and optional namespaces separated by spaces, such as "click" or "keydown. myPlugin ".
Selector: the descendant of the selector element used by a selector string to filter trigger events. If the selector is null or omitted, an event is always triggered when it reaches the selected element.
Data: when an event is triggered, the event. data must be passed to the event processing function.
Fn: The function executed when the event is triggered. The false value can also be abbreviated as a function, and false is returned.

Ii. Advantages of the jQuery on () method:
 
1. provides a uniform event binding method.

2. It still provides the advantages of. delegate (). You can also use. bind () directly if needed ()

3. Comparison with. bind (),. live (),. delegate:
 
1. In fact,. bind (),. live (),. delegate () are all implemented through. on ().
Copy codeThe Code is 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 matched DOM elements.

3. Do not use. live () anymore. It is no longer recommended and has many problems.

4. delegate () provides a good method to improve efficiency. At the same time, we can add an event processing method to the dynamically added element.

5. We can use. on () instead of the above three methods.

Iv. Examples of using the jQuery on () method

1. Bind The click Event and use the off () method to remove the method bound to on ().
Copy codeThe Code is as follows: $ (document). ready (function (){
$ ("P"). on ("click", function (){
Certificate (this).css ("background-color", "pink ");
});
$ ("Button"). click (function (){
$ ("P"). off ("click ");
});
});

2. bind multiple events to the same function
Copy codeThe Code is as follows: $ (document). ready (function (){
$ ("P"). on ("mouseover mouseout", function (){
$ ("P"). toggleClass ("intro ");
});
});

3. bind multiple events to different functions
Copy codeThe Code is 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. Bind custom events
Copy codeThe Code is 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. Transfer Data to the Function
Copy codeThe Code is as follows: function handlerName (event)
{
Alert (event. data. msg );
}

$ (Document). ready (function (){
$ ("P"). on ("click", {msg: "You just clicked me! "}, HandlerName)
});

6. Applicable to uncreated Elements
Copy codeThe Code is 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 jQuery programming.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.