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 相关文章推荐
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 Javascript
js实现网页版贪吃蛇游戏
Feb 22 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 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 smarty模版引擎中的缓存应用
2009/12/11 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
PHP自定义错误用法示例
2016/09/28 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHP常用的三种设计模式
2017/02/17 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
JQuery中extend使用介绍
2014/03/13 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python django 访问静态文件出现404或500错误
2017/01/20 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
GWebs公司笔试题
2012/05/04 面试题
师范生自我鉴定范文
2013/10/05 职场文书
公司活动方案范文
2014/03/06 职场文书
上课说话检讨书500字
2014/11/01 职场文书
青少年法制教育心得体会
2016/01/14 职场文书