关于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 相关文章推荐
判断日期是否能跨月查询的js代码
Jul 25 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 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学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
javascript multibox 全选
2009/03/22 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
JS中的BOM应用
2018/02/02 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
JS中的模糊查询功能
2019/12/08 Javascript
浅析Python基础-流程控制
2016/03/18 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
python3.x实现发送邮件功能
2018/05/22 Python
Django模板Templates使用方法详解
2019/07/19 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
经典c++面试题二
2015/08/14 面试题
EJB实例的生命周期
2016/10/28 面试题
装修协议书范本
2014/04/21 职场文书
就职演讲稿范文
2014/05/19 职场文书
开工仪式策划方案
2014/05/23 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
新郎结婚保证书
2015/02/26 职场文书