关于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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
js实现表单项的全选、反选及删除操作示例
Jun 05 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 fread读取文件注意事项
2016/09/24 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
python PyTorch预训练示例
2018/02/11 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
经济管理专业毕业生推荐信
2013/11/11 职场文书
运动会入场词60字
2014/02/15 职场文书
小学班级口号
2014/06/09 职场文书
音乐节策划方案
2014/06/09 职场文书
作风年建设汇报材料
2014/08/14 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
中学生思想品德评语
2014/12/31 职场文书
委托书格式范文
2015/01/28 职场文书
2016新年感言
2015/08/03 职场文书
python tkinter模块的简单使用
2021/04/07 Python