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 json2 使用方法
Mar 16 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
javascript闭包的理解
Apr 01 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 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
星际实力自我测试
2020/03/04 星际争霸
phpnow php探针环境检测代码
2014/11/04 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
JavaScript函数详解
2015/02/27 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
Windows下python3.7安装教程
2018/07/31 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
python反编译学习之字节码详解
2019/05/19 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
简历中自我评价怎么写
2014/02/12 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书