jQuery事件绑定.on()简要概述及应用


Posted in Javascript onFebruary 07, 2013

前几天在看《jquery基础教程》,看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的。

然后在一处看到live()已经被移除了,?澹?缓笕タ戳俗钚碌?q源码,果然被移除了,现在是1.9.1版本,不知道live()是在之前哪个版本被移除的,惭愧啊,之前都没留意。

看源码发现bind()和delegate()都是由on()实现的。on()的描述如下:

.on( events [, selector ] [, data ], handler(eventObject) )

一个简单的事件绑定如 $('button').on('click',function(){}); 与bind()无二样。

在需要为较多的元素绑定事件的时候,优先考虑事件委托,可以带来性能上的好处。比如:

jQuery事件绑定.on()简要概述及应用   jQuery事件绑定.on()简要概述及应用

如上图,将click事件绑定在document对象上,页面上任何元素发生的click事件都冒泡到document对象上得到处理。

注意到.on()的描述中第二个可选参数:selector。如下图,添加了第二个参数,选择符button:

jQuery事件绑定.on()简要概述及应用
结果:jQuery事件绑定.on()简要概述及应用

当事件冒泡到document对象时,检测事件的target,如果与传入的选择符(这里是button)匹配,就触发事件,否则不触发。

注意.on()也可以接收一个对象参数,该对象的属性是事件类型,属性值为事件处理函数。下面是官方文档的一个例子:

jQuery事件绑定.on()简要概述及应用

最后有一点,原先的live()方法,处理函数是默认绑定在document对象上不能变的,如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致较大的性能损失。而使用.on()方法,事件只会绑定到$()函数的选择符表达式匹配的元素上(上面我的例子中,为了简单绑定到了document),因此可以精确地定位到页面中的一部分,而事件冒泡的开销也可以减少。delegate()与on()同理,毕竟是用on()实现的:

jQuery事件绑定.on()简要概述及应用

Javascript 相关文章推荐
JavaScript触发器详解
Mar 10 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 #Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 #Javascript
jquery 选择器引擎sizzle浅析
Feb 06 #Javascript
extjs3 combobox取value和text案例详解
Feb 06 #Javascript
js汉字转拼音实现代码
Feb 06 #Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 #Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 #Javascript
You might like
php cookis创建实现代码
2009/03/16 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
PHP的拦截器实例分析
2014/11/03 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
使用grappelli为django admin后台添加模板
2014/11/18 Python
python daemon守护进程实现
2016/08/27 Python
python学习基础之循环import及import过程
2018/04/22 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
基于Python实现粒子滤波效果
2020/12/01 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
会计应聘求职信范文
2013/12/17 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
服务承诺书格式
2014/05/21 职场文书
应急管理培训方案
2014/06/12 职场文书
2014企业年终工作总结
2014/12/23 职场文书
青春雷锋观后感
2015/06/10 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python
Golang 对es的操作实例
2022/04/20 Golang