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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
js实现上传图片及时预览
May 07 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
js this 绑定机制深入详解
Apr 30 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/03/20 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
php显示页码分页类的封装
2017/06/08 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
函数式 JavaScript(一)简介
2014/07/07 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
python Paramiko使用示例
2020/09/21 Python
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
幼儿园六一亲子活动方案
2014/08/26 职场文书
教师党员自我评价2015
2015/03/04 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
MySQL常见优化方案汇总
2022/01/18 MySQL
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS