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 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 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生成带有雪花背景的验证码
2008/09/28 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php实现httpRequest的方法
2015/03/13 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
PHP 类与构造函数解析
2017/02/06 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
JS实现星星海特效
2019/12/24 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
Python 流程控制实例代码
2009/09/25 Python
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
公司捐款倡议书
2014/05/14 职场文书
大学活动总结模板
2014/07/10 职场文书
个人委托书怎么写
2014/09/17 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
小学信息技术教学反思
2016/02/16 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
Python实现byte转integer
2021/06/03 Python