jquery新的绑定事件机制on方法的使用方法


Posted in Javascript onApril 15, 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 相关文章推荐
JS location几个方法小姐
Jul 09 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
js实现select下拉框菜单
Dec 08 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
一个基于react的图片裁剪组件示例
Apr 18 Javascript
jquery datepicker参数介绍和示例
Apr 15 #Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 #Javascript
javascript页面渲染速度测试脚本分享
Apr 15 #Javascript
JS实现静止元素自动移动示例
Apr 14 #Javascript
js 获取元素下面所有li的两种方法
Apr 14 #Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 #Javascript
jquery使用jxl插件导出excel示例
Apr 14 #Javascript
You might like
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
介绍Python中几个常用的类方法
2015/04/08 Python
Python实现的简单算术游戏实例
2015/05/26 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
Python3 assert断言实现原理解析
2020/03/02 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
电气专业推荐信范文
2013/11/18 职场文书
少先队入队活动方案
2014/02/08 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
交通事故被告代理词
2015/05/23 职场文书
开学典礼观后感
2015/06/15 职场文书
网吧温馨提示
2015/07/17 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js