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

最新推荐文章于 2023-05-24 20:05:56 发布

大爱无疆的疯子

最新推荐文章于 2023-05-24 20:05:56 发布

阅读量492

点赞数

分类专栏： javascript

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一.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：必需；当绑定事件发生时，需要执行的函数；

例子：

 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("clickdbclick mouseout",childseletor,data,function);

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

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

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

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

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

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

<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>

适用Jquery版本

　　jquery1.7及其以上版本；jquery1.7版本出现之后用于替代bind()，live()绑定事件方式；