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实现键盘方向键翻页功能的代码
Jun 03 Javascript
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
js实现继承的5种方式
Dec 01 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 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中echo和print的区别
2014/08/28 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
js实现表格数据搜索
2020/08/09 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
python生成随机mac地址的方法
2015/03/16 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
python中的时区问题
2021/01/14 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
法学专业本科生自荐信范文
2013/12/17 职场文书
银行工作检查书范文
2014/01/31 职场文书
同居协议书范本
2014/04/23 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
校长一岗双责责任书
2015/05/09 职场文书
高三英语教学反思
2016/03/03 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL