关于jQuery新的事件绑定机制on()的使用技巧


Posted in Javascript onApril 26, 2013

今天浏览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 相关文章推荐
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
四十九个javascript小知识实用技巧
Nov 20 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 #Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 #Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 #Javascript
同时使用n个window onload加载实例介绍
Apr 25 #Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 #Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 #Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 #Javascript
You might like
编写PHP的安全策略
2006/10/09 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
php生成gif动画的方法
2015/11/05 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
jquery 锁定弹出层实现代码
2010/02/23 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
Python中自定义函数的教程
2015/04/27 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
python判断自身是否正在运行的方法
2019/08/08 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
酒鬼酒广告词
2014/03/21 职场文书
村长贪污检举信
2014/04/04 职场文书
党员目标管理责任书
2014/07/25 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript