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实现图片翻书效果示例代码
Sep 09 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
微信小程序实现图片滚动效果示例
Dec 05 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
es6函数name属性功能与用法实例分析
Apr 18 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模板类代码
2008/09/07 PHP
php session 预定义数组
2009/03/16 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
浅谈python中set使用
2016/06/30 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
Python yield与实现方法代码分析
2018/02/06 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
详解Python with/as使用说明
2018/12/13 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
深入浅析Python代码规范性检测
2020/07/31 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
电子商务专业个人的自我评价分享
2013/10/29 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
安全承诺书格式
2014/05/21 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
文明班级申报材料
2014/12/24 职场文书
2015年教研组工作总结
2015/05/04 职场文书