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 相关文章推荐
javascript 写类方式之二
Jul 05 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 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.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
Python删除windows垃圾文件的方法
2015/07/14 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
行政部主管岗位职责
2013/12/28 职场文书
总经理岗位职责范本
2014/02/02 职场文书
大学毕业自我评价
2014/02/02 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
感恩之星事迹材料
2014/05/03 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
校运会广播稿
2015/08/19 职场文书
委托书范本格式
2019/04/18 职场文书
一级电子管军用接收机测评
2022/04/05 无线电
使用Python获取字典键对应值的方法
2022/04/26 Python