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中form验证出错信息的查看方法
Oct 08 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python3基础之list列表实例解析
2014/08/13 Python
python使用chardet判断字符串编码的方法
2015/03/13 Python
python Django批量导入不重复数据
2016/03/25 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
Python tkinter模版代码实例
2020/02/05 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
优秀应届毕业生自荐信
2013/11/16 职场文书
美德好少年主要事迹
2014/01/29 职场文书
《手指教学》反思
2014/02/14 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
工作一年自我鉴定
2019/06/20 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技