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 相关文章推荐
js动态给table添加/删除tr的方法
Aug 02 Javascript
js中document.write的那点事
Dec 12 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
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 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
python中pop()函数的语法与实例
2020/12/01 Python
python 基于opencv去除图片阴影
2021/01/26 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
实习销售业务员自我鉴定
2013/09/21 职场文书
毕业学生推荐信
2013/12/01 职场文书
大学生先进事迹材料
2014/02/16 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
质量月口号
2014/06/20 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
python在package下继续嵌套一个package
2022/04/14 Python
virtualenv隔离Python环境的问题解析
2022/06/21 Python