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中的String对象详谈
Mar 03 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
JS前端监控采集用户行为的N种姿势
Jul 23 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
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
php socket通信简单实现
2016/11/18 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
jquery tab标签页的制作
2010/05/10 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
原生js实现轮播图
2017/02/27 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
python循环监控远程端口的方法
2015/03/14 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Python中property函数用法实例分析
2018/06/04 Python
python函数与方法的区别总结
2019/06/23 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
python从Oracle读取数据生成图表
2020/10/14 Python
pandas针对excel处理的实现
2021/01/15 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
幼儿园教师辞职信
2014/01/18 职场文书
升学宴来宾致辞
2015/07/27 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript