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 相关文章推荐
基于mootools插件实现遮罩层新手引导
May 24 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 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的知识
2006/11/17 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
[01:31]完美与DOTA2历程
2014/07/31 DOTA
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
python如何删除列为空的行
2020/07/17 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
幼儿园实习自我鉴定
2013/12/15 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
合作意向书范本
2014/03/31 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
商场收银员岗位职责
2015/04/07 职场文书
管理失职检讨书范文
2015/05/05 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL