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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
bootstrap css样式之表单
Jan 19 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
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&&mysql)四
2006/10/09 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
PHP 事务处理数据实现代码
2010/05/13 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
php常用的url处理函数总结
2014/11/19 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
python创建关联数组(字典)的方法
2015/05/04 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
华为c/c++笔试题
2016/01/25 面试题
财务主管岗位职责
2014/02/28 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
生日答谢词
2015/01/05 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
Python图像处理库PIL详细使用说明
2022/04/06 Python