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弹窗代码 可以指定弹出间隔
Jul 03 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
实现两个文本框同时输入的实例
Sep 25 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
微信小程序实现音乐播放器
Nov 20 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对象Object的概念 介绍
2012/06/14 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
优秀求职信范文分享
2013/12/19 职场文书
个人党性剖析材料
2014/02/03 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
关于安全的广播稿
2014/10/23 职场文书
期中考试复习计划
2015/01/19 职场文书
离婚被告代理词
2015/05/23 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
企业愿景口号
2015/12/25 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android