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 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
Angular 路由route实例代码
Jul 12 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 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的FTP学习(四)
2006/10/09 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
django将数组传递给前台模板的方法
2019/08/06 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
浅析Python __name__ 是什么
2020/07/07 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
Footshop法国:购买运动鞋
2020/01/19 全球购物
应届生污水处理求职信
2013/11/06 职场文书
写给女朋友的道歉信
2014/01/08 职场文书
大学生个人事迹材料
2014/01/21 职场文书
四风存在的原因分析
2014/02/11 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
死亡证明书样本说明
2014/10/18 职场文书
校园广播站开场白
2015/06/01 职场文书
舞出我人生观后感
2015/06/16 职场文书