关于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 相关文章推荐
js中匿名函数的N种写法
Sep 08 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
webpack打包js的方法
Mar 12 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
教大家制作简单的php日历
2015/11/17 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
vue实现文件上传功能
2018/08/13 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python进行数据提取的方法总结
2016/08/22 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
什么是python的自省
2020/06/21 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
第二课堂活动总结
2014/05/07 职场文书
辩论会主持词
2015/07/03 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书