jquery中绑定事件的异同


Posted in Javascript onFebruary 28, 2017

谈论jquery中bind(),live(),delegate(),on()绑定事件方式

1. Bind()

$(selector).bind(event,data,function)

Event:必须项;添加到元素的一个或多个事件。

Data:可选;需要传递的参数

Function:必需;当绑定事件发生时,需要执行的函数;

定义事件:

$(selector).bind({event1:function, event2:function, ...});

2.live()

$(selector).live(event,data,function)

Event:必须项;添加到元素的一个或多个事件

Data:可选;需要传递的参数

Function:必需;当绑定事件发生时,需要执行的函数;  

定义事件:

$(selector).live({event1:function, event2:function, ...}) 

3.delegate()

$(selector).delegate(childSelector,event,data,function)

childSelector:必须项;需要添加事件处理程序的元素,一般为selector的子元素;

event:必须项;添加到元素的一个或多个事件

Data:可选;需要传递的参数

Function:必需;当绑定事件发生时,需要执行的函数;

定义事件:

$(selector).delegate(childselector,{event1:function, event2:function, ...})

4.on()

$(selector).on(event,childselector,data,function)

childSelector:必须项;需要添加事件处理程序的元素,一般为selector的子元素;

event:必须项;添加到元素的一个或多个事件

Data:可选;需要传递的参数

Function:必需;当绑定事件发生时,需要执行的函数;

定义事件:

$(selector).on({event1:function, event2:function, ...},childselector); 

四种方式的异同和优缺点

相同点:

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()差些。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
layui导航栏实现代码
May 19 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
JS常见算法详解
Feb 28 #Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 #Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 #Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 #Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 #Javascript
js 转义字符及URI编码详解
Feb 28 #Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 #Javascript
You might like
操作Oracle的php类
2006/10/09 PHP
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
9个比较实用的php代码片段
2016/03/15 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
Python处理JSON数据并生成条形图
2016/08/05 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
python读取ini配置文件过程示范
2019/12/23 Python
Python实现自动访问网页的例子
2020/02/21 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
python 用struct模块解决黏包问题
2020/11/07 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
请介绍一下Ant
2016/07/22 面试题
幼儿园园长自我鉴定
2013/10/22 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
2014年个人年终总结
2015/03/09 职场文书
铁人观后感
2015/06/16 职场文书
新闻稿标题
2015/07/18 职场文书
办公用品管理制度
2015/08/04 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js