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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
你必须知道的Javascript知识点之"字面量和对应类型"说明介绍
Apr 23 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 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函数的实现原理及性能分析(二)
2015/05/13 PHP
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
jQuery回调方法使用示例
2017/06/26 jQuery
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python时间整形转标准格式的示例分享
2014/02/14 Python
python实现ID3决策树算法
2017/12/20 Python
Python实现微信好友的数据分析
2019/12/16 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
介绍一下write命令
2012/09/24 面试题
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
党校学习个人总结
2015/02/15 职场文书
催款函范文
2015/06/24 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS