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 相关文章推荐
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
JS实现一个简单的日历
Feb 22 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
bootstrap轮播模板使用方法详解
Nov 17 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
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
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
js 获取、清空input type="file"的值(示例代码)
2013/12/24 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
python图片验证码生成代码
2016/07/02 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
美国在线珠宝商店:SZUL
2017/02/11 全球购物
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
教师应聘个人求职信
2013/12/10 职场文书
创业计划书撰写原则
2014/01/25 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
css3 选择器
2022/05/11 HTML / CSS