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

本文主要介绍JQuery框架里面支持的自定义事件模型，通过实例说明什么时候可以利用事件模型进行面向对象的JS编程，以及利用“带命名空间的事件处理函数”来避免unbind时影响别的事件订阅。

 

<iframe id="aswift_0" style="padding: 0px; margin: 0px; left: 0px; position: absolute; top: 0px;" name="aswift_0" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="300" height="250"></iframe>

<iframe id="cproIframe1" style="padding: 0px; margin: 0px;" src="http://cpro.baidu.com/cpro/ui/uijs.php?rs=0&amp;tu=u91397&amp;tn=text_default_300_250&amp;n=jb51_cpr&amp;adn=3&amp;rsi1=250&amp;rsi0=300&amp;rad=&amp;rss0=%23FFFFFF&amp;conBW=0&amp;rss1=%23F7FCFF&amp;conOP=0&amp;rss2=%23006699&amp;titFF=%25E7%2580%25B9%25E5%25AC%25A9%25E7%25B6%258B&amp;titFS=12&amp;titTA=left&amp;rss3=%23333333&amp;rss4=%23333333&amp;rss5=&amp;rss6=%23e10900&amp;rsi5=4&amp;ts=1&amp;at=103&amp;ch=0&amp;cad=1&amp;aurl=&amp;rss7=&amp;cpa=1&amp;fv=11&amp;cn=1&amp;if=16&amp;word=http%3A%2F%2Fwww.jb51.net%2Farticle%2F24411.htm&amp;refer=http%3A%2F%2F74.125.128.100%2Furl%3Fsa%3Dt%26rct%3Dj%26q%3Djquery%25E8%2587%25AA%25E5%25AE%259A%25E4%25B9%2589%25E4%25BA%258B%25E4%25BB%25B6%25E6%25A8%25A1%25E5%259E%258B%26source%3Dweb%26cd%3D1%26ved%3D0CCsQFjAA%26url%3D%2568%2574%2574%2570%253a%252f%252f%2577%2577%2577%252e%256a%2562%2535%2531%252e%256e%2565%2574%252f%2561%2572%2574%2569%2563%256c%2565%252f%2532%2534%2534%2531%2531%252e%2568%2574%256d%26ei%3Der6dUaeiO4WZiQezrYDYBg%26usg%3DAFQjCNENeZ2-FPZPP6-E6ln-wzCJck85tg%26bvm%3Dbv.46865395%2Cd.aGc%26cad%3Drjt&amp;ready=1&amp;jk=b0fb569d4220fdae&amp;jn=3&amp;lmt=1369123433&amp;csp=1440,900&amp;csn=1440,900&amp;ccd=32&amp;chi=1&amp;cja=true&amp;cpl=33&amp;cmi=164&amp;cce=true&amp;csl=zh-CN&amp;did=1&amp;rt=6&amp;dt=1369292414&amp;ev=50331648&amp;c01=0&amp;prt=1369292413533&amp;i3=f&amp;anatp=0&amp;stid=0&amp;lunum=6" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" align="center,center" width="300" height="250"></iframe>

知识要点： 

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