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 相关文章推荐
JS 判断undefined的实现代码
Nov 26 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
js里面的变量范围分享
Jul 18 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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制作静态网站的模板框架
2006/10/09 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
js实现Tab选项卡切换效果
2020/07/17 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
Vue实现简单分页器
2018/12/29 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
python简易远程控制单线程版
2018/06/20 Python
python使用PyQt5的简单方法
2019/02/27 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
学习Python列表的基础知识汇总
2020/03/10 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
《凡卡》教学反思
2014/04/09 职场文书
甜品店创业计划书
2014/08/14 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL