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 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
webpack入门必知必会
Jan 16 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 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教程 插件机制在PHP中实现方案
2012/11/02 PHP
php不用正则验证真假身份证
2013/11/06 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
JS打印组合功能
2016/08/04 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
python修改字典键(key)的方法
2019/08/05 Python
Python sorted排序方法如何实现
2020/03/31 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
python else语句在循环中的运用详解
2020/07/06 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
介绍一下Make? 为什么使用make
2016/07/31 面试题
结婚典礼证婚词
2014/01/11 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
父母寄语大全
2014/04/12 职场文书
公司合作协议范文
2014/10/01 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
小爸爸观后感
2015/06/15 职场文书
解析MySQL binlog
2021/06/11 MySQL
7个关于Python的经典基础案例
2021/11/07 Python