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 文本框使用小结
May 22 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
vue总线机制(bus)知识点详解
May 10 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
Python写的服务监控程序实例
2015/01/31 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
tensorflow自定义激活函数实例
2020/02/04 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
师范教师毕业鉴定
2014/01/13 职场文书
安全资金保障制度
2014/01/23 职场文书
小学语文国培感言
2014/03/04 职场文书
高中综合实践活动总结
2014/07/07 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
python 标准库原理与用法详解之os.path篇
2021/10/24 Python