首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:07:53
字体:
来源:转载
供稿:网友

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

例子:

 <html xmlns="http://www.w3.org/1999/xhtml"> <head>   <title>jquery中bind()绑定事件方式</title>   <style type="text/css">     .container     {       width: 300px;       height: 300px;       border: 1px #ccc solid;       background-color: Green;     }     .btn-test     {       border: 1px #ccc solid;       padding: 5px 15px;       cursor: pointer;     }   </style>   <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>   <script type="text/javascript">     $(function () {        /*********添加单个事件处理*********/        $(".btn-test").bind("click", function () {         //显示隐藏div         $(".container").slideToggle();       });        /********添加多个事件处理********/        //空格相隔方式       $(".btn-test").bind("mouseout click", function () {         //显示隐藏div         $(".container").slideToggle();       });        //大括号替代方式       $(".btn-test").bind({         "mouseout": function () {           alert("这是mouseout事件!");         },         "click": function () {           $(".container").slideToggle();         }       });        /********删除事件处理********/       $(".btn-test").unbind("click");      });   </script> </head> <body>   <input type="button" value="按钮" class="btn-test" />   <div class="container">   </div> </body> </html>

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

二.ON():

简要描述

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

使用方式 

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

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选