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 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
javascript数组的使用
Mar 28 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
js实现索引图片切换效果
Nov 21 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
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安全配置
2006/10/09 PHP
PHP经典面试题集锦
2015/03/19 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
prototype 的说明 js类
2006/09/07 Javascript
showModelessDialog()使用详解
2006/09/07 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
一些Unix笔试题和面试题
2013/01/22 面试题
学习自我鉴定
2014/02/01 职场文书
求职面试个人自我评价
2014/02/28 职场文书
合作经营协议书
2014/04/17 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
小学生教师节广播稿
2015/08/19 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers