jQuery中delegate与on的用法与区别示例介绍


Posted in Javascript onDecember 20, 2013

在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 函数速查表
Feb 07 Javascript
javascript 自动填写表单的实现方法
Apr 09 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
jquery数组之存放checkbox全选值示例代码
Dec 20 #Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 #Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 #Javascript
Javascript selection的兼容性写法介绍
Dec 20 #Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 #Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 #Javascript
js生成随机数之random函数随机示例
Dec 20 #Javascript
You might like
PHP生成静态页面详解
2006/12/05 PHP
关于Intype一些小问题的解决办法
2008/03/28 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
Javascript核心读书有感之语言核心
2015/02/01 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
浅析Python迭代器的高级用法
2020/07/16 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
捐资助学倡议书
2014/04/15 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
汽车转让协议书范本
2014/12/07 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技