关于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 相关文章推荐
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
vue之debounce属性被移除及处理详解
Nov 13 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
C有"按引用传递"吗
2016/09/06 面试题
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
中学生获奖感言
2014/02/04 职场文书
4s店活动策划方案
2014/08/25 职场文书
表扬信格式模板
2015/05/05 职场文书
交通安全教育主题班会
2015/08/12 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
安全生产培训心得体会
2016/01/18 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
《山中访友》教学反思
2016/02/24 职场文书
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技