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 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
jquery.validate使用详解
Jun 02 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
原生JS轮播图插件
Feb 09 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 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
多php服务器实现多session并发运行
2006/10/09 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
node后端服务保活的实现
2019/11/10 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
python自动zip压缩目录的方法
2015/06/28 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
维护民族团结演讲稿
2014/08/27 职场文书
股份转让协议书范本
2015/01/27 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL