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 相关文章推荐
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
一分钟理解js闭包
May 04 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 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
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
php str_pad 函数用法简介
2009/07/11 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Python中super的用法实例
2015/05/28 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
关于python字符串方法分类详解
2019/08/20 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
印度服装购物网站:Limeroad
2018/09/26 全球购物
简短大学毕业感言
2014/01/18 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书