jQuery中delegate与on的用法与区别示例介绍


Posted in Javascript onDecember 20, 2013

在jQuery1.7中 .delegate()已被.on()取代。对于早期版本,它仍然使用事件委托的最有效手段。
在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的。

.delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

// jQuery 1.4.3+ 
$( elements ).delegate( selector, events, data, handler ); 
// jQuery 1.7+ 
$( elements ).on( events, [selector], data, handler );

例如:.delegate() code:
$("table").delegate("td","click",function(){ 
alert("hello"); 
});

.on() code:
$("table").on("click", "td", function() { 
alert("hi"); 
});

PS: 两者区别是seleter和events顺序不同
delegate和on方法被选元素的子元素必须是"合法的"子元素。比如
$("table").delegate("button","click",function(){...}); 
$("table").on("click", "p", function(){...});

就不起作用,因为正常情况下,table子元素应为tr,td...

on(events,[selector],[data],fn),参数[selector]是可选,
一个选择器字符串用于过滤器的触发事件的选择器元素的后代。
例如:

$("table").on("click", ".td1", function() { 
alert("hi"); 
});

过滤class为td1的table子元素

而delegate的selector是必需的。

Javascript 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
Node.js返回JSONP详解
May 18 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
jquery数组之存放checkbox全选值示例代码
Dec 20 #Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 #Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 #Javascript
Javascript selection的兼容性写法介绍
Dec 20 #Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 #Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 #Javascript
js生成随机数之random函数随机示例
Dec 20 #Javascript
You might like
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
分享10段PHP常用代码
2015/11/11 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
Python实现提取文章摘要的方法
2015/04/21 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
Python subprocess模块常见用法分析
2018/06/12 Python
python requests指定出口ip的例子
2019/07/25 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
《称象》教学反思
2014/04/25 职场文书
护理学专业求职信
2014/06/29 职场文书
公司踏青活动方案
2014/08/16 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
电工实训报告总结
2014/11/05 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书