Jquery中的bind(),on()绑定事件方式总结

最新推荐文章于 2024-06-18 15:15:44 发布

fruggy

最新推荐文章于 2024-06-18 15:15:44 发布

阅读量515

点赞数

分类专栏： js

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

转载自：http://blog.csdn.net/qq_27918787/article/details/52541102

一.bind()

使用方式：$(selector).bind(event,data,function)

event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；

　　　　　　　单事件处理：例如 $(selector).bind("click",data,function);

　　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(selector).bind("click dbclick mouseout",data,function);

　　　　　　　2.利用大括号灵活定义多事件，例如 $(selector).bind({event1:function, event2:function, ...})　

　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　　　

data：可选；需要传递的参数；

function：必需；当绑定事件发生时，需要执行的函数；

例子：

[javascript]view plain copy
 1 <html xmlns="http://www.w3.org/1999/xhtml">  
 2 <head>  
 3     <title>jquery中bind()绑定事件方式</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             /*********添加单个事件处理*********/  
24   
25             $(".btn-test").bind("click", function () {  
26                 //显示隐藏div  
27                 $(".container").slideToggle();  
28             });  
29   
30             /********添加多个事件处理********/  
31   
32             //空格相隔方式  
33             $(".btn-test").bind("mouseout click", function () {  
34                 //显示隐藏div  
35                 $(".container").slideToggle();  
36             });  
37   
38             //大括号替代方式  
39             $(".btn-test").bind({  
40                 "mouseout": function () {  
41                     alert("这是mouseout事件!");  
42                 },  
43                 "click": function () {  
44                     $(".container").slideToggle();  
45                 }  
46             });  
47   
48             /********删除事件处理********/  
49             $(".btn-test").unbind("click");  
50   
51         });  
52     </script>  
53 </head>  
54 <body>  
55     <input type="button" value="按钮" class="btn-test" />  
56     <div class="container">  
57     </div>  
58 </body>  
59 </html>  

适用所有版本，但是根据官网解释，自从jquery1.7版本以后bind()函数推荐用on()来代替。

二.ON():

简要描述

　　on() 为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

使用方式　

　　$(selector).on(event,childselector,data,function)

　　event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；

　　　　　　单事件处理：例如 $(selector).on("click",childselector,data,function);

　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(selector).on("click dbclick mouseout",childseletor,data,function);

　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如 $(selector).on({event1:function, event2:function, ...},childselector);　

　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　　　　　　大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　

　　childSelector: 可选；需要添加事件处理程序的元素，一般为selector的子元素；　　

　　data：可选；需要传递的参数；

　　function：必需；当绑定事件发生时，需要执行的函数；

[javascript]view plain copy
<html xmlns="http://www.w3.org/1999/xhtml">  
 2 <head>  
 3     <title>jquery中on()绑定事件方式</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             /*********添加单个事件处理*********/  
24   
25             $(".header").on("click", ".btn-test", function () {  
26                 //显示隐藏div  
27                 $(".container").slideToggle();  
28             });  
29   
30             /********添加多个事件处理********/  
31   
32             //空格相隔方式  
33             $(".header").on("mouseout click", ".btn-test", function () {  
34                 //显示隐藏div  
35                 $(".container").slideToggle();  
36             });  
37   
38             //大括号替代方式  
39             $(".header").on({  
40                 "mouseout": function () {  
41                     alert("这是mouseout事件!");  
42                 },  
43                 "click": function () {  
44                     $(".container").slideToggle();  
45                 }  
46             }, ".btn-test");  
47   
48             //删除事件  
49             $(".header").off("click", ".btn-test");  
50   
51         });  
52     </script>  
53 </head>  
54 <body>  
55     <div class="header">  
56         <input type="button" value="按钮" class="btn-test" />  
57     </div>  
58     <div class="container">  
59     </div>  
60 </body>  
61 </html>  