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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 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&amp;mysql(四)
2006/10/09 PHP
php 破解防盗链图片函数
2008/12/09 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
django 创建过滤器的实例详解
2017/08/14 Python
Python 修改列表中的元素方法
2018/06/26 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
浅谈python出错时traceback的解读
2020/07/15 Python
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
护士专业推荐信
2013/11/02 职场文书
财务会计专业求职信范文
2013/12/31 职场文书
股权转让协议书范本
2014/04/12 职场文书
爱耳日活动总结
2014/04/30 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS