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 相关文章推荐
jQuery插件开发全解析
Oct 10 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
微信小程序实现左滑删除效果
Nov 18 Javascript
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
基于empty函数的判断详解
2013/06/17 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
js解决movebox移动问题
2016/03/29 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
pycharm安装和首次使用教程
2018/08/27 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
Python坐标线性插值应用实现
2019/11/13 Python
详解python with 上下文管理器
2020/09/02 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
节约用水演讲稿
2014/05/21 职场文书
会计学专业求职信
2014/07/17 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
经理聘任证明
2015/03/02 职场文书
入伍通知书
2015/04/23 职场文书
母亲去世追悼词
2015/06/23 职场文书
学生会干部任命书
2015/09/21 职场文书
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis