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中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
BootStrap前端框架使用方法详解
Feb 26 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 抽象类的简单应用
2011/09/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
限制文本字节数js代码
2007/03/06 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
JavaScript中this详解
2015/09/01 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
利用python实现AR教程
2019/11/20 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
虚拟机下载python是否需要联网
2020/07/27 Python
团日活动总结
2014/04/28 职场文书
个人承诺书格式
2014/06/03 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
Python re.sub 反向引用的实现
2021/07/07 Python
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript