关于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 相关文章推荐
javascript Excel操作知识点
Apr 24 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 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
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
php动态生成函数示例
2014/03/21 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
vue下载二进制流图片操作
2020/10/26 Javascript
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
Python API自动化框架总结
2019/11/12 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
社区健康教育实施方案
2014/03/18 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
乌镇导游词
2015/02/02 职场文书
公务员个人总结
2015/02/12 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
nginx结合openssl实现https的方法
2021/07/25 Servers
MySQL多表查询机制
2022/03/17 MySQL