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面向对象设计二 构造函数模式
Dec 20 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
JavaScript获取路径设计源码
May 22 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
python循环监控远程端口的方法
2015/03/14 Python
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
python的flask框架难学吗
2020/07/31 Python
快速创建python 虚拟环境
2020/11/28 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
优秀中学生事迹材料
2014/01/31 职场文书
上课看小说检讨书
2014/02/22 职场文书
环保倡议书怎么写
2014/05/16 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
七一建党节演讲稿
2014/09/11 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL