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 相关文章推荐
Javascript条件判断使用小技巧总结
Sep 08 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
javascript动态加载二
Aug 22 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 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 Socket 编程
2010/04/09 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
Python struct模块解析
2014/06/12 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python实现机器人卡牌
2019/10/06 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
和平主题的演讲稿
2014/01/12 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
基层党组织建设整改方案
2014/09/16 职场文书