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 相关文章推荐
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
javascript常用的方法整理
Aug 20 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 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 变量未定义等错误的解决方法
2011/01/12 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
浅析Python四种数据类型
2018/09/26 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
读书伴我成长演讲稿
2014/05/07 职场文书
学习之星事迹材料
2014/05/17 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
党支部四风整改方案
2014/10/25 职场文书
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL