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 相关文章推荐
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
Angular工具方法学习
Dec 26 Javascript
Angular的$http与$location
Dec 26 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
微信小程序转发事件实现解析
Oct 22 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
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python将string转换到float的实例方法
2019/07/29 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
国际会议邀请函范文
2014/01/16 职场文书
委托公证书
2014/04/08 职场文书
房屋转让协议书
2014/04/11 职场文书
星级党支部申报材料
2014/05/31 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
语文教师求职信范文
2015/03/20 职场文书
周末问候语大全
2015/11/10 职场文书
创业计划书之家政服务
2019/09/18 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫