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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 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
ie6 动态缩略图不显示的原因
2009/06/21 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
详解JS函数重载
2014/12/04 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
python实现数字炸弹游戏
2020/07/17 Python
Python reques接口测试框架实现代码
2020/07/28 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
关于工资低的辞职信
2014/01/14 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
学习心理学心得体会
2016/01/22 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
详解运行Python的神器Jupyter Notebook
2021/06/03 Python