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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 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 socke 向指定页面提交数据
2008/07/23 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
python和C语言混合编程实例
2014/06/04 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
python实现随机漫步方法和原理
2019/06/10 Python
解决python 找不到module的问题
2020/02/12 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
python多进程使用函数封装实例
2020/05/02 Python
Python中常见的数制转换有哪些
2020/05/27 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
讲文明树新风演讲稿
2014/05/12 职场文书
导游欢迎词范文
2015/01/23 职场文书
公司晚会主持词
2019/04/17 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书