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 相关文章推荐
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
学习vue.js计算属性
Dec 03 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
JavaScript 巧学巧用
May 23 Javascript
小程序实现搜索框
Jun 19 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
Node.js API详解之 console模块用法详解
May 12 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
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
vue实现评论列表功能
2019/10/25 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
python3 对list中每个元素进行处理的方法
2018/06/29 Python
详解python里的命名规范
2018/07/16 Python
Django的models中on_delete参数详解
2019/07/16 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
python基于openpyxl生成excel文件
2020/12/23 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
大学校务公开实施方案
2014/03/31 职场文书
保护母亲河倡议书
2014/04/14 职场文书
中央空调节能方案
2014/06/15 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
如何用python绘制雷达图
2021/04/24 Python
Python实现Hash算法
2022/03/18 Python