jQuery事件 delegate()使用方法介绍


Posted in Javascript onOctober 30, 2012

delegate定义和用法

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

参数 描述
childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
event 必需。规定附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。

语法
$(selector).delegate(childSelector,event,data,function)

返回值: jQuery delegate(selector,[type],[data],fn)

概述

指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

参数
selector,[type],fnString,String,Function V1.4.2
selector:选择器字符串,用于过滤器触发事件的元素。

type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

fn:当事件发生时运行的函数

selector,[type],[data],fnString,String,Object,Function V1.4.2
selector:选择器字符串,用于过滤器触发事件的元素。

type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

data:传递到函数的额外数据

fn:当事件发生时运行的函数

selector,eventsString,String V1.4.3
selector:选择器字符串,用于过滤器触发事件的元素。

events:一个或多个事件类型的字符串和函数的数据映射来执行他们。

示例
描述:
当点击鼠标时,隐藏或显示 p 元素:

HTML 代码:

<div style="background-color:red"> 
<p>这是一个段落。</p> 
<button>请点击这里</button> 
</div>

jQuery 代码:
$("div").delegate("button","click",function(){ 
$("p").slideToggle(); 
});

描述: delegate这个方法可作为live()方法的替代,使得每次事件绑定到特定的DOM元素。
以下两段代码是等同的:
$("table").delegate("td", "hover", function(){ $(this).toggleClass("hover"); 
});$("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }); 
});
Javascript 相关文章推荐
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
vue2中使用less简易教程
Mar 27 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
fancybox modal的完美解决(右上的X)
Oct 30 #Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 #Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 #Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 #Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 #Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 #Javascript
改进版通过Json对象实现深复制的方法
Oct 24 #Javascript
You might like
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php的debug相关函数用法示例
2016/07/11 PHP
php封装的page分页类完整实例
2016/10/18 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
javascript中的面向对象
2017/03/30 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
传播学毕业生求职信
2013/10/11 职场文书
大学生思想汇报范文
2013/12/31 职场文书
公积金转移接收函
2014/01/11 职场文书
设计师个人求职信范文
2014/02/02 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
药剂专业求职信
2014/06/20 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers