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 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
redux.js详解及基本使用
May 24 Javascript
js如何验证密码强度
Mar 18 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
最新最全的手机号验证正则表达式
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
BBS(php & mysql)完整版(七)
2006/10/09 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
php时间计算相关问题小结
2016/05/09 PHP
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python持久性管理pickle模块详细介绍
2015/02/18 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Python datetime模块使用方法小结
2020/06/18 Python
python 深度学习中的4种激活函数
2020/09/18 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
广告词串烧
2014/03/19 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
项目安全员岗位职责
2015/02/15 职场文书
谢师宴学生致辞
2015/07/27 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL