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的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
javascript元素动态创建实现方法
May 13 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
Node.js简单入门前传
Aug 21 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
PHP数据库操作Helper类完整实例
2016/05/11 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
jQuery中click事件用法实例
2014/12/26 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
Ionic2调用本地SQlite实例
2017/04/22 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Python实现基于HTTP文件传输实例
2014/11/08 Python
用实例分析Python中method的参数传递过程
2015/04/02 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
幼儿园教师考核制度
2014/02/01 职场文书
《自选商场》教学反思
2014/02/14 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
养牛场项目建议书
2014/05/13 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
党性心得体会
2014/09/03 职场文书
前台文员岗位职责
2015/02/04 职场文书
五年级数学教学反思
2016/02/16 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js