jQuery中delegate和on的用法与区别详细解析


Posted in Javascript onJanuary 26, 2014

在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(非HTML5)可编辑表格实现代码
Dec 11 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
Vue动态实现评分效果
May 24 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
JavaScript中Dom操作实例详解
Jul 08 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
使用javascript为网页增加夜间模式
Jan 26 #Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 #Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 #Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 #Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 #Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 #Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 #Javascript
You might like
php操作xml
2013/10/27 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
JavaScript手机振动API
2016/06/11 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
vue中appear的用法
2017/08/17 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
Vue中key的作用示例代码详解
2020/06/10 Javascript
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
python 重命名轴索引的方法
2018/11/10 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
python推导式的使用方法实例
2021/02/28 Python
给儿子的表扬信
2014/01/15 职场文书
太太口服液广告词
2014/03/20 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
公务员个人总结
2015/02/12 职场文书
环保守法证明
2015/06/24 职场文书
话题作文之学会尊重
2019/12/16 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技