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中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python 实现归并排序算法
2012/06/05 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
无故旷工检讨书
2014/01/26 职场文书
逃课上网检讨书
2014/02/20 职场文书
电钳工人个人求职信
2014/05/10 职场文书
行政处罚告知书
2015/07/01 职场文书
中秋节祝酒词
2015/08/12 职场文书
《西门豹》教学反思
2016/02/23 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL