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中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
微信小程序如何获取地址
Dec 24 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
Javascript事件实例详解
2013/11/06 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
python基础教程之序列详解
2014/08/29 Python
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
如何理解Python中的变量
2020/06/01 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
办公室主任岗位职责
2013/11/08 职场文书
小学数学国培感言
2014/03/10 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
资产移交协议书
2016/03/24 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
mysql 生成连续日期及变量赋值
2022/03/20 MySQL