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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
jquery遍历json对象集合详解
May 18 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
PHP 字符串分割和比较
2009/10/06 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
python Flask实现restful api service
2017/12/04 Python
python获取代理IP的实例分享
2018/05/07 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
Python字符串对象实现原理详解
2019/07/01 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
企业军训感言
2014/02/08 职场文书
个人近期表现材料
2014/02/11 职场文书
军训结束新闻稿
2015/07/17 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
python 安全地删除列表元素的方法
2022/03/16 Python