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 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
vue使用nprogress实现进度条
Dec 09 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php批量上传的实现代码
2013/06/09 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
destoon复制新模块的方法
2014/06/21 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
php session_decode函数用法讲解
2019/05/26 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
jquery append与appendTo方法比较
2017/05/24 jQuery
vue.js删除列表中的一行
2018/06/30 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
Python中运行并行任务技巧
2015/02/26 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
2019年.net常见面试问题
2012/02/12 面试题
汉语专业应届生求职信
2013/10/01 职场文书
护理专业自荐信范文
2014/02/26 职场文书
销售岗位职责范本
2014/06/12 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
拙作再改《我的收音机情缘》
2022/04/05 无线电