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 相关文章推荐
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 Javascript
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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
成功的餐厅经营创业计划书
2014/01/15 职场文书
家长给孩子的评语
2014/01/30 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
品牌转让协议书
2014/08/20 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL