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图片平滑连续滚动插件
Apr 27 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
使用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 设置MySQL连接字符集的方法
2011/01/02 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
jquery map方法使用示例
2014/04/23 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python中字符串的格式化方法小结
2016/05/03 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Python 实现try重新执行
2019/12/21 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
实习生的自我评价
2014/01/08 职场文书
公司活动邀请函
2014/01/24 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
学习经验演讲稿
2014/05/10 职场文书
岗位工作说明书
2014/07/29 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
满月酒邀请函
2015/01/30 职场文书
教师个人年度总结
2015/02/11 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript