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 相关文章推荐
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
vue全屏事件开发详解
Jun 17 Javascript
详解vue 组件的实现原理
Nov 12 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
PHP中的self关键字详解
2019/06/23 PHP
用javascript实现画板的代码
2007/09/05 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
Javascript 跨域访问解决方案
2009/02/14 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
jquery图片切换插件
2015/03/16 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
python文件比较示例分享
2014/01/10 Python
Python中多线程及程序锁浅析
2015/01/21 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
python生成圆形图片的方法
2020/03/25 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
python3的pip路径在哪
2020/06/23 Python
Python调用C语言程序方法解析
2020/07/07 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
python在协程中增加任务实例操作
2021/02/28 Python
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
采购部岗位职责
2013/11/24 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书