Reprinted from: http://blog.csdn.net/qq_27918787/article/details/52541102
One.bind()
How to use it: $(selector).bind(event,data,function)
event: Requirements; one or more events added to an element, such as click,dblclick, etc.
Single event processing: e.g. $(selector).bind("click",data,function);
Multi-event processing: 1. Separating multiple events with spaces, such as $(selector). bind ("click dbclick mouseout", "data, function");
2. Use brackets to flexibly define multiple events, such as $(selector).bind({event1:function, event2:function,...})
3. Space-separated mode: the binding is rigid and can not bind functions to events alone, which is suitable for handling multiple events to call the same function;
Bracket alternatives: Binding is more flexible, allowing events to be bound to separate functions; and
data: optional; parameters to be passed;
function: required; functions that need to be executed when binding events occur;
Example:
- 1 <html xmlns="http://www.w3.org/1999/xhtml">
- 2 <head>
- 3 <title>jquery in bind()Binding event mode</title>
- 4 <style type="text/css">
- 5 .container
- 6 {
- 7 width: 300px;
- 8 height: 300px;
- 9 border: 1px #ccc solid;
- 10 background-color: Green;
- 11 }
- 12 .btn-test
- 13 {
- 14 border: 1px #ccc solid;
- 15 padding: 5px 15px;
- 16 cursor: pointer;
- 17 }
- 18 </style>
- 19 <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
- 20 <script type="text/javascript">
- 21 $(function () {
- 22
- 23 /*********Add Single Event Handling***********/
- 24
- 25 $(".btn-test").bind("click", function () {
- 26 //Display hidden div
- 27 $(".container").slideToggle();
- 28 });
- 29
- 30 /********Adding multiple event handling********/
- 31
- 32 //Spacing
- 33 $(".btn-test").bind("mouseout click", function () {
- 34 //Display hidden div
- 35 $(".container").slideToggle();
- 36 });
- 37
- 38 //Bracket substitution
- 39 $(".btn-test").bind({
- 40 "mouseout": function () {
- 41 alert("This is mouseout Event!");
- 42 },
- 43 "click": function () {
- 44 $(".container").slideToggle();
- 45 }
- 46 });
- 47
- 48 /********Delete Event Handling********/
- 49 $(".btn-test").unbind("click");
- 50
- 51 });
- 52 </script>
- 53 </head>
- 54 <body>
- 55 <input type="button" value="Button" class="btn-test" />
- 56 <div class="container">
- 57 </div>
- 58 </body>
- 59 </html>
All versions are applicable, but according to the official website, since version 1.7 of jquery, the bind() function is recommended to be replaced by on().
Two.ON():
Brief description
on() adds one or more event handlers to the specified element and specifies the functions to run when these events occur. Event handlers that use the on() method apply to current or future elements, such as new elements created by scripts.
Usage
$(selector).on(event,childselector,data,function)
Events: Requirements; one or more event s added to an element, such as click,dblclick, etc.
Single event processing: e.g. $(selector). on ("click", child selector, data, function);
Multi-event processing: 1. Separating multiple events with spaces, such as $(selector).on("click dbclick mouseout", "child seletor, data, function);
2. Use braces to flexibly define multiple events, such as $(selector). on ({event1:function, event2:function,...}, child selector);
3. Space-separated: Binding is rigid and cannot bind functions to events alone. It is suitable for handling multiple events to call the same function.
Bracket substitution: Binding is more flexible, allowing events to be bound separately to functions;
childSelector: optional; elements that need to be added to the event handler, typically child elements of selector; and
data: optional; parameters to be passed;
function: Necessary; functions that need to be executed when binding events occur;
- <html xmlns="http://www.w3.org/1999/xhtml">
- 2 <head>
- 3 <title>jquery in on()Binding event mode</title>
- 4 <style type="text/css">
- 5 .container
- 6 {
- 7 width: 300px;
- 8 height: 300px;
- 9 border: 1px #ccc solid;
- 10 background-color: Green;
- 11 }
- 12 .btn-test
- 13 {
- 14 border: 1px #ccc solid;
- 15 padding: 5px 15px;
- 16 cursor: pointer;
- 17 }
- 18 </style>
- 19 <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
- 20 <script type="text/javascript">
- 21 $(function () {
- 22
- 23 /*********Add Single Event Handling***********/
- 24
- 25 $(".header").on("click", ".btn-test", function () {
- 26 //Display hidden div
- 27 $(".container").slideToggle();
- 28 });
- 29
- 30 /********Adding multiple event handling********/
- 31
- 32 //Spacing
- 33 $(".header").on("mouseout click", ".btn-test", function () {
- 34 //Display hidden div
- 35 $(".container").slideToggle();
- 36 });
- 37
- 38 //Bracket substitution
- 39 $(".header").on({
- 40 "mouseout": function () {
- 41 alert("This is mouseout Event!");
- 42 },
- 43 "click": function () {
- 44 $(".container").slideToggle();
- 45 }
- 46 }, ".btn-test");
- 47
- 48 //Delete event
- 49 $(".header").off("click", ".btn-test");
- 50
- 51 });
- 52 </script>
- 53 </head>
- 54 <body>
- 55 <div class="header">
- 56 <input type="button" value="Button" class="btn-test" />
- 57 </div>
- 58 <div class="container">
- 59 </div>
- 60 </body>
- 61 </html>
Applicable to Jquery version
JQuery 1.7 and above; jQuery 1.7 is used to replace bind(), live() binding event mode after it appears;
Same point:
1. Supporting bindings of multi-event elements; space-separated or bracket-substituted;
2. By means of event bubbling, events are transmitted to document for event response.
Comparisons and links:
1. The bind () function can only set events for existing elements, but live (), on () and delegate () all support event settings for new elements in the future.
2. The bind() function was highly recommended before jQuery version 1.7. After version 1.7 came out, the official did not recommend using bind() as an alternative function to on(), which is also a newly added function in version 1.7. Likewise, it can be used to replace live() function. The live() function has been deleted in version 1.9.
3. The live() function and the delegate() function are similar, but the live() function is slower in execution speed, flexibility and CSS selector support than the delegate(). To understand the specific situation, please stamp this:
http://kb.cnblogs.com/page/94469/
4. Bid () supports all versions of Jquery; live() supports jQuery 1.8-; delegate() supports jQuery 1.4.2+; on() supports jQuery 1.7+;
If the jQuery version is a low version in the project, delegate() is recommended, and on() can be used to replace the high version of jquery. The above is only personal opinion. If you have different ideas, please share them with us.