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 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
JS实现动态无缝轮播
Jan 11 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 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 调用远程url的六种方法小结
2009/11/02 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
PHP内核探索:变量概述
2014/01/30 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
快速入门Vue
2016/12/19 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
Python数据结构之图的应用示例
2018/05/11 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Python实现简单猜数字游戏
2021/02/03 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
法国房车租赁网站:Yescapa
2019/08/26 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
档案管理员岗位职责
2013/12/01 职场文书
公司薪酬管理制度
2014/01/31 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
文明村镇申报材料
2014/05/06 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书