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 相关文章推荐
JScript中的"this"关键字使用方式补充材料
Mar 08 Javascript
Display SQL Server Version Information
Jun 21 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
原生js的数组除重复简单实例
May 24 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
php结合js实现多条件组合查询
May 28 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 Javascript
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
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
分析JavaScript数组操作难点
2017/12/18 Javascript
js动态引入的四种方法
2018/05/05 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Pygame框架实现飞机大战
2020/08/07 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
南京某公司笔试题
2013/01/27 面试题
企业军训感言
2014/02/08 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
小学生成绩单评语
2014/12/31 职场文书
教师教育心得体会
2016/01/19 职场文书