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获取input表单值的代码
Apr 19 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
javascript读取本地文件和目录方法详解
Aug 06 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读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
javascript 面向对象继承
2009/11/26 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python文件的md5加密方法
2016/04/06 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
Python中and和or如何使用
2020/05/28 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
欠款起诉书范文
2015/05/19 职场文书
法律意见书范本
2015/06/04 职场文书
学籍证明模板
2015/06/18 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
golang 接口嵌套实现复用的操作
2021/04/29 Golang