关于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 相关文章推荐
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
微信小程序实现留言功能
Oct 31 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 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
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
解决python 输出是省略号的问题
2018/04/19 Python
python之super的使用小结
2018/08/13 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
Python制作词云图代码实例
2019/09/09 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
行政主管岗位职责
2013/11/18 职场文书
财务出纳岗位职责
2014/02/03 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
婚礼答谢礼品
2015/01/20 职场文书
法定代表人身份证明书
2015/06/18 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android