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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 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 curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
JS中的作用域链
2017/03/01 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
解决python读取几千万行的大表内存问题
2018/06/26 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
迟到检讨书1000字
2014/01/15 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
企业承诺书格式范文
2015/04/28 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL