jQuery新的事件绑定机制on()示例应用


Posted in Javascript onJuly 18, 2014

今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定。因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

替换bind()

当第二个参数'selector'为null时,on()和bind()其实在用法上基本上没有任何区别了,所以我们可以认为on()只是比bind()多了一个可选的'selector'参数,所以on()可以非常方便的换掉bind()

替换live()

在1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面,当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单,它是通过document进行事件委派的,因此我们也可以使用on()通过将事件绑定到document来达到live()一样的效果。

live()写法

$('#list li').live('click', '#list li', function() { 
//function code here. 
});

on()写法

$(document).on('click', '#list li', function() { 
//function code here. 
});

这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。

替换delegate()
delegate()是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。

delegate()的写法

$('#list').delegate('li', 'click', function() { 
//function code here. 
});

on()写法

$('#list').on('click', 'li', function() { 
//function code here. 
});

貌似第一个和第二个参数的顺序颠倒了一下,别的基本一样。

总结

jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了,因为它已经处于不推荐使用列表了,随时会被干掉。如果只绑定一次事件,那接着用one()吧,这个没有变化。

Javascript 相关文章推荐
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 #Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 #Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 #Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 #Javascript
iframe调用父页面函数示例详解
Jul 17 #Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 #Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 #Javascript
You might like
smtp邮件发送一例
2006/10/09 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
Python抓取百度查询结果的方法
2015/07/08 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
幼儿园教师奖惩制度
2014/02/01 职场文书
买房协议书
2014/04/11 职场文书
小学教师评语大全
2014/04/23 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
护士求职自荐信
2015/03/25 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python