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 相关文章推荐
javascript时间函数基础介绍
Mar 28 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
JS实现的几个常用算法
Nov 12 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
uni-app从安装到卸载的入门教程
May 15 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
phpMyAdmin 安装及问题总结
2009/05/28 PHP
xml转json的js代码
2012/08/28 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
js同源策略详解
2015/05/21 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
Javascript之String对象详解
2016/06/08 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
JS实现4位随机验证码
2020/10/19 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python使用pymysql小技巧
2017/06/04 Python
一道python走迷宫算法题
2018/01/22 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
python+opencv实现阈值分割
2018/12/26 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
小学生新学期寄语
2014/01/19 职场文书
租赁意向书范本
2014/04/01 职场文书
学党史心得体会
2014/09/05 职场文书
迎新生晚会主持词
2015/06/30 职场文书
2015年高三教学工作总结
2015/07/21 职场文书