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 相关文章推荐
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 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递归使用示例(php递归函数)
2014/02/14 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
Javascript的闭包
2009/12/31 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
用友笔试题目
2016/10/25 面试题
乡镇精神文明建设汇报材料
2014/08/15 职场文书
作风建设剖析材料
2014/10/06 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers