关于Jquery中的事件绑定总结


Posted in Javascript onOctober 26, 2016

前言

因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到朋友,如有不妥之处,希望指出、交流。

一.bind()

简要描述

bind()向匹配元素添加一个或多个事件处理器。

使用方式

$(selector).bind(event,data,function)

event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

单事件处理:例如 $(selector).bind("click",data,function);

多事件处理:1.利用空格分隔多事件,例如 $(selector).bind("click dbclick mouseout",data,function);

2.利用大括号灵活定义多事件,例如 $(selector).bind({event1:function, event2:function, ...}) 

3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;  

data:可选;需要传递的参数;

function:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。

二.Live()

简要描述

live() 向当前或未来的匹配元素添加一个或多个事件处理器;

使用方式

$(selector).live(event,data,function)

event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

单事件处理:例如 $(selector).live("click",data,function);

多事件处理:1.利用空格分隔多事件,例如 $(selector).live("click dbclick mouseout",data,function);

2.利用大括号灵活定义多事件,例如 $(selector).live({event1:function, event2:function, ...}) 

3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;  

data:可选;需要传递的参数;

function:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替。

三.delegate()

简要描述

delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

使用方式 

$(selector).delegate(childSelector,event,data,function)

childSelector: 必需项;需要添加事件处理程序的元素,一般为selector的子元素;

event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

单事件处理:例如 $(selector).delegate(childselector,"click",data,function);

多事件处理:1.利用空格分隔多事件,例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);

2.利用大括号灵活定义多事件,例如 $(selector).delegate(childselector,{event1:function, event2:function, ...}) 

3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;  

data:可选;需要传递的参数;

function:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

jquery1.4.2及其以上版本;

四.on()

简要描述

on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

使用方式 

$(selector).on(event,childselector,data,function)

event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

单事件处理:例如 $(selector).on("click",childselector,data,function);

多事件处理:1.利用空格分隔多事件,例如 $(selector).on("click dbclick mouseout",childseletor,data,function);

2.利用大括号灵活定义多事件,例如 $(selector).on({event1:function, event2:function, ...},childselector); 

3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

大括号替代方式:绑定较为灵活,可以给事件单独绑定函数; 

childSelector: 可选;需要添加事件处理程序的元素,一般为selector的子元素; 

data:可选;需要传递的参数;

function:必需;当绑定事件发生时,需要执行的函数;

适用Jquery版本

jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;

五.四种方式的异同和优缺点

相同点:

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().

4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+; 

七.总结

如果项目中引用jquery版本为低版本,推荐用delegate(),高版本jquery可以使用on()来代替,以上仅为个人看法,如有不同想法,欢迎交流。

以上就是小编为大家带来的关于Jquery中的事件绑定总结全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
小程序实现密码输入框
Nov 16 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 #Javascript
理解JavaScript原型链
Oct 25 #Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 #Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 #Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 #Javascript
JavaScript prototype属性详解
Oct 25 #Javascript
对Angular.js Controller如何进行单元测试
Oct 25 #Javascript
You might like
文件上传类
2006/10/09 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
微信小程序中setInterval的使用方法
2017/09/29 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
openCV提取图像中的矩形区域
2020/07/21 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
新闻学专业应届生求职信
2013/11/08 职场文书
艺术应用与设计个人的自我评价
2013/11/23 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
租车协议书范本
2014/04/22 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
公司回复函格式
2015/07/14 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
技术转让协议书
2016/03/19 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL