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 parseInt字符转化为数字函数使用小结
Nov 05 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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
php5.3 goto函数介绍和示例
2014/03/21 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
JavaScript中Math对象使用说明
2008/01/16 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
Python Requests 基础入门
2016/04/07 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
pygame实现成语填空游戏
2019/10/29 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
python实现126邮箱发送邮件
2020/05/20 Python
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
降消项目实施方案
2014/03/30 职场文书
读书月活动方案
2014/05/22 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
工程部文员岗位职责
2015/02/04 职场文书
2014年个人总结范文
2015/03/09 职场文书
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS