jQuery中delegate与on的用法与区别示例介绍


Posted in Javascript onDecember 20, 2013

在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面向对象之体会[总结]
Nov 13 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 #Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 #Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 #Javascript
Javascript selection的兼容性写法介绍
Dec 20 #Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 #Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 #Javascript
js生成随机数之random函数随机示例
Dec 20 #Javascript
You might like
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
css配合jquery美化 select
2013/11/29 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Django自定义manage命令实例代码
2018/02/11 Python
Python logging模块用法示例
2018/08/28 Python
python中import与from方法总结(推荐)
2019/03/21 Python
详解Python字符串切片
2019/05/20 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
Python里面如何拷贝一个对象
2014/02/17 面试题
优秀志愿者事迹材料
2014/02/03 职场文书
优乐美广告词
2014/03/14 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL