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 相关文章推荐
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
javascript 四则运算精度修正函数代码
May 31 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
jquery.validate使用详解
Jun 02 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
使用微信SDK自定义分享的方法
Jul 03 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 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
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
Python中类的继承代码实例
2014/10/28 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
在python中画正态分布图像的实例
2019/07/08 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Python中six模块基础用法
2019/12/08 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
EJB的几种类型
2012/08/15 面试题
商务日语毕业生自荐信
2013/11/23 职场文书
直接有效的自我评价
2014/01/11 职场文书
职业女性的职业规划
2014/03/04 职场文书
创文明城市标语
2014/06/16 职场文书
2014年财务部工作总结
2014/11/11 职场文书
2014年部门工作总结
2014/11/12 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS