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


Posted in Javascript onOctober 26, 2016

一.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);

多事件处理:

1.利用空格分隔多事件,例如 $(selector).on("click dbclick 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">
 <head>
   <title>jquery中on()绑定事件方式</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 () {
 
       /*********添加单个事件处理*********/
 
       $(".header").on("click", ".btn-test", function () {
         //显示隐藏div
         $(".container").slideToggle();
       });
 
       /********添加多个事件处理********/
 
       //空格相隔方式
       $(".header").on("mouseout click", ".btn-test", function () {
         //显示隐藏div
         $(".container").slideToggle();
       });
 
       //大括号替代方式
       $(".header").on({
         "mouseout": function () {
           alert("这是mouseout事件!");
         },
         "click": function () {
           $(".container").slideToggle();
         }
       }, ".btn-test");
 
       //删除事件
       $(".header").off("click", ".btn-test");
 
     });
   </script>
 </head>
 <body>
   <div class="header">
     <input type="button" value="按钮" class="btn-test" />
   </div>
   <div class="container">
   </div>
 </body>
 </html>

适用Jquery版本

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

相同点:

1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;

2.均是通过事件冒泡方式,将事件传递到document进行事件的响应;

比较和联系:

1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;演示代码

如下:

2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以

用来代替live()函数,live()函数在1.9版本已经删除;

3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些,想了解具体情况,请戳这:

4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+; 

如果项目中引用jquery版本为低版本,推荐用delegate(),高版本jquery可以使用on()来代替,以上仅为个人看法,如有不同想法,欢迎拍砖交流。

以上就是小编为大家带来的关于Jquery中的bind(),on()绑定事件方式总结全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
BootStrap selectpicker
Jun 20 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 #Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 #Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 #Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 #Javascript
简单的js计算器实现
Oct 26 #Javascript
利用python分析access日志的方法
Oct 26 #Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 #Javascript
You might like
php stripslashes和addslashes的区别
2014/02/03 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
jQuery技巧总结
2011/01/01 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
基于python实现计算两组数据P值
2020/07/10 Python
python二维图制作的实例代码
2020/12/03 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
介绍一下游标
2012/01/10 面试题
傲盾软件面试题
2015/08/17 面试题
How TDD works
2012/09/30 面试题
关于毕业的广播稿
2014/01/10 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
学校安全责任书
2014/04/14 职场文书
写字楼租赁意向书
2014/07/30 职场文书
2015教师年度考核评语
2015/03/25 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
Sql Server之数据类型详解
2022/02/28 SQL Server
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL