JQuery自定义事件的应用 JQuery最佳实践


Posted in Javascript onAugust 01, 2010

知识要点:

1,自定义事件custom events及事件的订阅

2,trigger、bind、unbind方法的使用

3,带命名空间的自定义事件

将下面内容粘贴至txt文档后再直接粘贴至firebug的控制台,运行看看。

/* 
JQuery自定义事件的应用-Javascript OO 
有一帅哥叫Levin,在某公司前端设计部工作,他的主管是大帅哥A,经理是大美眉B。 
领导们希望可以抽空瞄瞄这家伙每周的工作情况,于是。。。 
Levin每周一要用google doc写一份关于上周工作的总结,并被要求写完后要MSN通知A和B。。。 
Levin非常乐意做周总结,但是他提出了一个建议: 
既然我用google doc写好了,你们喜欢看便用google reader订阅我的文档更新吧,我不喜欢用微软的MSN。。。 这丫...A和B头顶乌鸦飘了几秒,但欣然答应。 
*/

//这个是Levin同学
var Levin={name:"Levin"}; 
Levin=$(Levin);

//每周要写周总结

Levin.bind("evt_weeklyReport",function(evt){ 
alert(this.name+"高呼:Yeah!周总结已经写好啦."); 
});

//主管A

var A={name:"帅哥A"};

//他要订阅Levin的周总结
A.rssLevin=function(){ 
Levin.bind("evt_weeklyReport.fromA",function(evt,data){ 
alert(A.name+":嗯,不错,Levin还是挺积极的嘛!"); 
}) 
}; 
A.rssLevin();

//经理B
var B={name:"美眉B"};

//她也订阅Levin的周总结

B.rssLevin=function(){ 
Levin.bind("evt_weeklyReport.fromB",function(evt,data){ 
alert(B.name+":周总结呆会看,先看看他说的那个网站"); 
window.location=evt.site; 
}) 
}; 
B.rssLevin();

//每次Levin同学写好周总结后便会用google doc发布一下

Levin.trigger({type:"evt_weeklyReport",site:"http://3water.com"});

//经理B突然有一天去搜狐做了,不再订阅Levin的周结...
[code]
B.unRssLevin=function(){
alert("我要去搜狐做副总裁啦,哈哈");
Levin.unbind("evt_weeklyReport.fromB");
return true;
}();
[html]

//尽管B跳槽了,周总结还是要按时发布的。。。

Levin.trigger({type:"evt_weeklyReport",site:"http://3water.com"});
Javascript 相关文章推荐
js 调整select 位置的函数
Feb 21 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 #Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 #Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 #Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 #Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 #Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 #Javascript
jQuery对象[0]是什么含义?
Jul 31 #Javascript
You might like
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
js模拟类继承小例子
2010/07/17 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
Python聊天室实例程序分享
2016/01/05 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
python logging日志模块原理及操作解析
2019/10/12 Python
如何理解python面向对象编程
2020/06/01 Python
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
2015年公司工作总结
2015/04/25 职场文书
婚姻出轨保证书
2015/05/08 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
初一语文教学反思
2016/03/03 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python