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

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.