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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
js获取json元素数量的方法
Jan 27 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
js弹出对话框方式小结
Nov 17 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 Javascript
JavaScript的Set数据结构详解
Feb 18 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位运算的简单权限设计
2013/06/30 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php实现图片缩放功能类
2013/12/18 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
利用python实现逐步回归
2020/02/24 Python
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
小学生开学感言
2014/02/28 职场文书
防沙治沙典型材料
2014/05/07 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
六查六看自查报告
2014/10/14 职场文书
收费员岗位职责
2015/02/14 职场文书