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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
Python sys.argv用法实例
2015/05/28 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
python打开使用的方法
2019/09/30 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
简历中自我评价范文3则
2013/12/14 职场文书
大学生党员自我批评
2014/02/14 职场文书
通用自荐信范文
2014/03/14 职场文书
安全技术说明书
2014/05/09 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
校友回访母校寄语
2015/02/26 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python