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 相关文章推荐
json的前台操作和后台操作实现代码
Jan 20 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
详解Vue中的基本语法和常用指令
Jul 23 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实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
2016/08/02 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
python实现排序算法
2014/02/14 Python
python实现无证书加密解密实例
2014/10/27 Python
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
python使用fork实现守护进程的方法
2017/11/16 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
大二自我鉴定范文
2013/10/05 职场文书
公司前台辞职报告
2014/01/19 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫
DSP接收机前端设想
2022/04/05 无线电
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python