jquery下为Event handler传递动态参数的代码


Posted in Javascript onJanuary 06, 2011

实例代码

<body> 
<div id="demo"></div> 
<button id="btn" >trigger it</button> 
<script type="text/javascript"> 
(function($) { 
//demo1 
$("#demo").bind("demo-trigger", function(e, args) { 
var info = []; 
//对应的我们从args参数中获取数据 
for(var prop in args) { 
info.push(prop + ":" + args[prop]); 
} 
this.innerHTML = info.join(';'); 
}); 
$('#btn').click(function() { 
// 我们把数据作为一个参数和我们关心的事件名一起传入trigger方法 
$('#demo').trigger('demo-trigger', { 
name:'Andrew', 
age: '23', 
job: 'FrontEnd Dev' 
}); 
}); /**demo2 
$("#demo").bind("demo-trigger", function(e) { 
var info = []; 
//我们通过传入的e.extra来获取我们传入的数据 
for(var prop in e.extra) { 
info.push(prop + ":" + e.extra[prop]); 
} 
//展现出来 
this.innerHTML = info.join(';'); 
}); 
$('#btn').click(function() { 
//这个用法很有意思 我们new一个jQuery Event对象 参数为我们关心的事件名 
var event = new jQuery.Event("demo-trigger"); 
//给这个event附加一个属性 包含我们的数据 
event.extra = { 
name:'Andrew', 
age :'23', 
job :'FrontEnd Dev' 
}; 
//最后把event传入trigger方法 ...看上面的$('#demo')..... 
$('#demo').trigger(event); 
});**/ 
})(jQuery); 
</script> 
</body>
Javascript 相关文章推荐
Javascript this关键字使用分析
Oct 21 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
深入理解node.js http模块
Jan 24 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
Jquery下判断Id是否存在的代码
Jan 06 #Javascript
jquery关于图形报表的运用实现代码
Jan 06 #Javascript
基于Jquery的简单图片切换效果
Jan 06 #Javascript
基于jquery的分页控件(C#)
Jan 06 #Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 #Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 #Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 #Javascript
You might like
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
JavaScript国旗变换效果代码
2008/08/13 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
Python中的字符串替换操作示例
2016/06/27 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
python求前n个阶乘的和实例
2020/04/02 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
大专生自荐信
2013/10/04 职场文书
大学生毕业自我鉴定范文
2013/11/03 职场文书
简历的自我评价
2014/02/03 职场文书
民族团结先进个人材料
2014/02/05 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
机关作风建设整改方案
2014/10/27 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers
Java实现带图形界面的聊天程序
2022/06/10 Java/Android