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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
js实现div弹出层的方法
Nov 20 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
在VUE style中使用data中的变量的方法
Jun 19 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数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
python类中super() 的使用解析
2019/12/19 Python
Python中的__init__作用是什么
2020/06/09 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
思想品德自我鉴定
2013/10/12 职场文书
毕业留言寄语大全
2014/04/10 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
六查六看心得体会
2014/10/14 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
行政二审代理词
2015/05/25 职场文书
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle