JQuery自定义事件的应用 JQuery最佳实践 - Web前端
作者:98wpeu发布时间:2026-06-06分类:网页前端技术浏览:90
导读:知识要点:1,自定义事件customevents及事件的订阅2,trigger、bind、unbind方法的使用3,带命名空间的自定义事件将下面内容粘贴至txt文档后再直接...
知识要点:
1,自定义事件customevents及事件的订阅
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://jb51.net"});
//经理B突然有一天去搜狐做了,不再订阅Levin的周结...
[code]
B.unRssLevin=function(){
alert("我要去搜狐做副总裁啦,哈哈");
Levin.unbind("evt_weeklyReport.fromB");
return true;
}();
[html]
//尽管B跳槽了,周总结还是要按时发布的。。。
复制代码 代码如下:
Levin.trigger({type:"evt_weeklyReport",site:"HTTP://jb51.net"});
1,自定义事件customevents及事件的订阅
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://jb51.net"});
//经理B突然有一天去搜狐做了,不再订阅Levin的周结...
[code]
B.unRssLevin=function(){
alert("我要去搜狐做副总裁啦,哈哈");
Levin.unbind("evt_weeklyReport.fromB");
return true;
}();
[html]
//尽管B跳槽了,周总结还是要按时发布的。。。
复制代码 代码如下:
Levin.trigger({type:"evt_weeklyReport",site:"HTTP://jb51.net"});
相关推荐
- jQuery News Ticker 基于jQuery的即时新闻行情展示插件 - Web前端
- Jquery中val()表单取值赋值的实例代码 - Web前端
- JQuery循环滚动图片代码 - Web前端
- JQuery扩展插件Validate—6 radio、checkbox、select的验证 - Web前端
- jquery $.getJSON()跨域请求 - Web前端
- Yii-自定义删除确认弹框(zyd)jquery实现代码 - Web前端
- JQuery扩展插件Validate—6 radio、checkbox、select的验证 - Web前端
- 基于jquery的loading 加载提示效果实现代码 - Web前端
- JQuery 自定义CircleAnimation,Animate方法学习笔记 - Web前端
- 运用JQuery的toggle实现网页加载完成自动弹窗 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3【第六章】Foundation之按钮和下拉功能 - Web前端
- 4jQuery编写widget的一些技巧分享 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 7在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 8分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 9javascript原生和jquery库实现iframe自适应高度和宽度 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件:Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP:Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性


