JQuery自定义事件的应用 JQuery最佳实践_jquery

知识要点:

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://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"});

时间: 2024-11-08 23:20:24

JQuery自定义事件的应用 JQuery最佳实践_jquery的相关文章

Jquery 自定义事件实现发布/订阅的简单实例_jquery

Jquery 自定义事件实现发布/订阅的简单实例 //用户点击logoff按钮时,广播一个自定义事件,给任何需要保存状态的感兴趣的观察者,然后导航到logoff页面 $('#logoff').click(function(){ $.event.trigger("logoff");//广播一个事件 window.location = "logoff.php";//导航到新页面 }); 以上这篇Jquery 自定义事件实现发布/订阅的简单实例就是小编分享给大家的全部内容

jQuery绑定事件的几种实现方式_jquery

本文实例为大家分享了jQuery绑定事件多种实现方法,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><!--百度CDN--> </head> <body> <input ty

jQuery自定义事件

在JS中,消息的通知是通过事件表达的,当代码库增长到一定的规模就需要考虑将行为和自定义事件进行解耦,通过事件机制可以将类设计为独立的模块,通过事件对外通信提高了程序的开发效率. 了解自定义事件的概念: 类似 DOM 的行为:你在 DOM 节点(包括 document 对象)监听并触发自定义事件.这些事件既可以冒泡,也可以被拦截.这正是 Prototype.jQuery 和 MooTools 所做的.如果事件不能扩散,就必须在触发事件的对象上进行监听. 命名空间:一些框架需要你为事件指定命名空间,

7个jQuery最佳实践_jquery

随着富网络应用(rich web applications)数量的增长,以及用户对快速交互响应的高期望,开发者开始使用JavaScript库来快速高效的完成一些重复性的工作.这其中最流行的JavaScript库就是jQuery.但是jQuery的大量应用却带来了另外一个问题:在使用JavaScript库的时候,有哪些最佳实践,又有哪些不好的实践呢? 背景 在这篇文章中,我会给大家介绍在编写.调试和审查JavaScript代码的时候一些好的实践(至少我是这么认为的).事实上,我选择了其中7个最常见

jQuery自定义事件的简单实现代码_jquery

一.需求原因虽然JQuery为我们定义了许多的事件,但是有时候还是不能满足我们的要求,故本例实现一个自定义事件实现的例子. 二.具体实现 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv=&quo

jQuery 自定义事件的学习笔记

jquery中提供了两种方法可以绑定自定义事件: bind()和one() 而绑定的自定义事件的触发,必须得用jquery中的 trigger()方法才能触发. 我们先来看on事件  代码如下 复制代码 $('.js-submit').on('click', function() {   // some code here }); 除开 click 事件,我们还有许多可以绑定的事件,比如 dblclick.blur.change 等等. 但这些事件有一个问题,语义(semantic)不明.cli

jquery 自定义事件绑定与触发 $.one与$.bind效果对比实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTEN

JQuery的自定义事件代码,触发,绑定简单实例_jquery

自定义事件触发 复制代码 代码如下: $ event.trigger("myEventName"); 自定义事件绑定 下面的代码创建了一个绑定到自定义事件和自定义事件触发时将被执行. 复制代码 代码如下: $(this).bind("myEventName",function(){ alert("myEventName triggered"); });

jQuery中事件与动画的总结分享_jquery

1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) --:只是等待标签完毕,即可执行 区别:前者在HTML页面中只能解析最后一个,二后者是N个 window.onload() = function () { } $(function () { $("li").bind("click", function () { $(this).css("