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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
PHP 基本语法格式
2009/12/15 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
Python脚本实现下载合并SAE日志
2015/02/10 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
django中media媒体路径设置的步骤
2019/11/15 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
班组长工作职责
2013/12/25 职场文书
作风建设年活动总结
2014/08/27 职场文书
皇城相府导游词
2015/02/06 职场文书
小学运动会加油稿
2015/07/22 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
python_tkinter事件类型详情
2022/03/20 Python
springboot读取resources下文件的方式详解
2022/06/21 Java/Android