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的三级展开列表
Apr 26 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
jquery默认校验规则整理
Mar 24 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 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 XML操作的各种方法解析(比较详细)
2010/06/17 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
Python 代码性能优化技巧分享
2012/08/07 Python
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python对List中的元素排序的方法
2018/04/01 Python
Numpy之文件存取的示例代码
2018/08/03 Python
python3去掉string中的标点符号方法
2019/01/22 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
送给他或她的礼物:FUN.com
2018/08/17 全球购物
办公室前台的岗位职责
2013/12/20 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
公司授权委托书范本
2014/04/03 职场文书
2015年教师节主持词
2015/07/03 职场文书