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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
实现JavaScript中继承的三种方式
Oct 16 Javascript
Js 刷新框架页的代码
Apr 13 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 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
1 Tube Radio
2021/03/02 无线电
php巧获服务器端信息
2006/12/06 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
scrapy爬虫完整实例
2018/01/25 Python
10个Python小技巧你值得拥有
2018/09/29 Python
python得到windows自启动列表的方法
2018/10/14 Python
Python数据集切分实例
2018/12/08 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
汽车维修求职信
2014/06/15 职场文书
中职生求职信
2014/07/01 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
如何判断pytorch是否支持GPU加速
2021/06/01 Python
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫