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 document.referrer判断访客来源网址
May 15 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
Jquery ajax基础教程
Nov 20 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
微信小程序实现锚点跳转
Nov 23 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
php用户注册信息验证正则表达式
2015/11/12 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
python递归计算N!的方法
2015/05/05 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python实现的config文件读写功能示例
2019/09/24 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python编写单元测试代码实例
2020/09/10 Python
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
公司行政助理岗位职责
2015/04/11 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
Python中异常处理用法
2021/11/27 Python
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript