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 相关文章推荐
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
JavaScript实现简单进度条效果
Mar 25 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 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
PHP 高手之路(一)
2006/10/09 PHP
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
javascript Base类 包含基本的方法
2009/07/22 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
对pandas写入读取h5文件的方法详解
2018/12/28 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
详解Python中第三方库Faker
2020/09/25 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
经济学博士求职自荐信范文
2013/11/23 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
信访工作经验交流材料
2014/05/23 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
电子商务实训报告总结
2014/11/05 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
李强为自己工作观后感
2015/06/11 职场文书
2015年重阳节主持词
2015/07/04 职场文书