关于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代码
Sep 07 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 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中ADODB类详解
2008/03/25 PHP
2014过年倒计时示例
2014/01/31 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Python双链表原理与实现方法详解
2020/02/22 Python
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
教师学习培训邀请函
2014/02/04 职场文书
环卫工人节活动总结
2014/08/29 职场文书
创先争优个人承诺书
2014/08/30 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
python之django路由和视图案例教程
2021/07/26 Python
Python如何使用循环结构和分支结构
2022/04/13 Python
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS