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 中对象的继承〔转贴〕
Jan 22 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
jquery实现心算练习代码
Dec 06 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
javascript操作向表格中动态加载数据
Aug 27 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
3.从实例开始
2006/10/09 PHP
基于mysql的bbs设计(二)
2006/10/09 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
jquery实现数字输入框
2017/02/22 Javascript
vue组件间通信解析
2017/03/01 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
Python多进程编程技术实例分析
2014/09/16 Python
python实现调用其他python脚本的方法
2014/10/05 Python
Python读写配置文件的方法
2015/06/03 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
类如何去实现接口
2013/12/19 面试题
办公室前台岗位职责范本
2013/12/10 职场文书
人事专员的职责
2014/02/26 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
产品售后服务承诺书
2014/05/21 职场文书
爱牙日活动总结
2014/08/29 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python