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

最新推荐文章于 2024-06-04 22:19:30 发布

Yuyuquan

最新推荐文章于 2024-06-04 22:19:30 发布

阅读量7.8k

点赞数 2

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_27918787/article/details/52541102

版权

一.bind()使用方式：$(selector).bind(event,data,function)event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；　　　　　　　单事件处理：例如 $(selector).bind("click",data,function);　　　　　　　多事件处理：1.利用空格分隔多事件，例如$(select

摘要由CSDN通过智能技术生成

一.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()函数

最低0.47元/天解锁文章

Yuyuquan

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Jquery中的bind(),on()绑定事件方式总结

一.bind()使用方式：$(selector).bind(event,data,function)event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；　　　　　　　单事件处理：例如 $(selector).bind("click",data,function);　　　　　　　多事件处理：1.利用空格分隔多事件，例如$(select
复制链接

扫一扫