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 相关文章推荐
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
Highcharts入门之简介
Aug 02 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
js面试题之异步问题的深入理解
Sep 20 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
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
python实现淘宝秒杀脚本
2020/06/23 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
测试时代收集的软件测试面试题
2013/09/25 面试题
会计毕业生自我鉴定
2013/11/04 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
商务会议邀请函
2014/01/09 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
团购业务员岗位职责
2014/03/15 职场文书
物资采购方案
2014/06/12 职场文书
实验室的标语
2014/06/20 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
见习报告的格式
2014/10/31 职场文书
旷课检讨书
2015/01/26 职场文书
2015年信访工作总结
2015/04/07 职场文书
活动简报范文
2015/07/22 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书