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 10 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
js实现微博发布小功能
Jan 12 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
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
PHP 获取文件权限函数介绍
2013/07/11 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
php中的观察者模式简单实例
2015/01/20 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
对比分析json及XML
2014/11/28 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
利用python画出AUC曲线的实例
2020/02/28 Python
PyTorch中的C++扩展实现
2020/04/02 Python
Python unittest框架操作实例解析
2020/04/13 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
销售总监工作职责
2013/11/21 职场文书
营销团队口号
2014/06/06 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
母亲节寄语大全
2015/02/27 职场文书
新入职员工工作总结
2015/10/15 职场文书