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应用于login页面的问题及解决
Oct 17 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
区分vue-router的hash和history模式
Oct 03 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 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
JavaScript 指导方针
2007/04/05 Javascript
ExtJS 入门
2010/10/29 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python构建深度神经网络(续)
2018/03/10 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
pandas分批读取大数据集教程
2020/06/06 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
女性时尚在线:IVRose
2019/02/23 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
android面试问题与答案
2016/12/27 面试题
小学毕业感言50字
2014/02/16 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
二手房购房意向书
2015/05/09 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
windows系统搭建WEB服务器详细教程
2022/08/05 Servers