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的控制tabs打开的数量的代码
Oct 17 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
使用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你的验证码安全码?
2007/01/02 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
Python三元运算实现方法
2015/01/12 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
python图像和办公文档处理总结
2019/05/28 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
python中xlrd模块的使用详解
2021/02/01 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
神路信息Java面试题目
2013/03/31 面试题
给同事的道歉信
2014/01/11 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
婚前协议书
2014/04/15 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
授权委托书范文
2014/07/31 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python