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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
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网站提速三大“软”招
2006/10/09 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
理解javascript中的闭包
2017/01/11 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
JS快速实现简单计算器
2020/04/08 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
仓库班组长岗位职责
2013/12/12 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
2014高考励志标语
2014/06/05 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
Go timer如何调度
2021/06/09 Golang
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python