JQuery自定義事件的應用 JQuery最佳實踐
更新時間：2010年08月01日 13:49:22 作者：
本文主要介紹JQuery框架里面支持的自定義事件模型，通過實例說明什么時候可以利用事件模型進行面向對象的JS編程，以及利用“帶命名空間的事件處理函數(shù)”來避免unbind時影響別的事件訂閱。
知識要點：
1，自定義事件custom events及事件的訂閱
2，trigger、bind、unbind方法的使用
3，帶命名空間的自定義事件
將下面內容粘貼至txt文檔后再直接粘貼至firebug的控制臺，運行看看。
/*
JQuery自定義事件的應用-Javascript OO
有一帥哥叫Levin，在某公司前端設計部工作，他的主管是大帥哥A，經(jīng)理是大美眉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!周總結已經(jīng)寫好啦.");
});
//主管A
var A={name:"帥哥A"};
//他要訂閱Levin的周總結
A.rssLevin=function(){
Levin.bind("evt_weeklyReport.fromA",function(evt,data){
alert(A.name+":嗯，不錯，Levin還是挺積極的嘛！");
})
};
A.rssLevin();
//經(jīng)理B
var B={name:"美眉B"};
//她也訂閱Levin的周總結
B.rssLevin=function(){
Levin.bind("evt_weeklyReport.fromB",function(evt,data){
alert(B.name+":周總結呆會看，先看看他說的那個網(wǎng)站");
window.location=evt.site;
})
};
B.rssLevin();
//每次Levin同學寫好周總結后便會用google doc發(fā)布一下
Levin.trigger({type:"evt_weeklyReport",site:"http://jb51.net"});
//經(jīng)理B突然有一天去搜狐做了，不再訂閱Levin的周結...
[code]
B.unRssLevin=function(){
alert("我要去搜狐做副總裁啦，哈哈");
Levin.unbind("evt_weeklyReport.fromB");
return true;
}();
[html]
//盡管B跳槽了，周總結還是要按時發(fā)布的。。。
Levin.trigger({type:"evt_weeklyReport",site:"http://jb51.net"});
1，自定義事件custom events及事件的訂閱
2，trigger、bind、unbind方法的使用
3，帶命名空間的自定義事件
將下面內容粘貼至txt文檔后再直接粘貼至firebug的控制臺，運行看看。
復制代碼 代碼如下:
/*
JQuery自定義事件的應用-Javascript OO
有一帥哥叫Levin，在某公司前端設計部工作，他的主管是大帥哥A，經(jīng)理是大美眉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!周總結已經(jīng)寫好啦.");
});
//主管A
復制代碼 代碼如下:
var A={name:"帥哥A"};
//他要訂閱Levin的周總結
復制代碼 代碼如下:
A.rssLevin=function(){
Levin.bind("evt_weeklyReport.fromA",function(evt,data){
alert(A.name+":嗯，不錯，Levin還是挺積極的嘛！");
})
};
A.rssLevin();
//經(jīng)理B
復制代碼 代碼如下:
var B={name:"美眉B"};
//她也訂閱Levin的周總結
復制代碼 代碼如下:
B.rssLevin=function(){
Levin.bind("evt_weeklyReport.fromB",function(evt,data){
alert(B.name+":周總結呆會看，先看看他說的那個網(wǎng)站");
window.location=evt.site;
})
};
B.rssLevin();
//每次Levin同學寫好周總結后便會用google doc發(fā)布一下
復制代碼 代碼如下:
Levin.trigger({type:"evt_weeklyReport",site:"http://jb51.net"});
//經(jīng)理B突然有一天去搜狐做了，不再訂閱Levin的周結...
[code]
B.unRssLevin=function(){
alert("我要去搜狐做副總裁啦，哈哈");
Levin.unbind("evt_weeklyReport.fromB");
return true;
}();
[html]
//盡管B跳槽了，周總結還是要按時發(fā)布的。。。
復制代碼 代碼如下:
Levin.trigger({type:"evt_weeklyReport",site:"http://jb51.net"});
相關文章
這篇文章主要介紹了jQuery 添加元素和刪除元素的方法，文中講解非常細致，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
詳解easyui基于 layui.laydate日期擴展組件
這篇文章主要介紹了詳解easyui基于 layui.laydate日期擴展組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
在一個不是自己寫的頁面上，如何快速定位到他綁定的事件代碼在哪,下面為大家簡單的介紹下,需要的朋友可以參考下2014-06-06
jQuery.validate 常用方法及需要注意的問題，需要的朋友可以參考一下2013-03-03
計劃總是趕不上變化，這篇插件開發(fā)的文章本應在上周完成，由于手頭的項目實在緊張，只好讓路吧，嘿嘿。今天將跟大家一起完成這個插件的開發(fā)流程。2011-08-08
JS實現(xiàn)復制內容到剪貼板功能兼容所有瀏覽器(推薦)
這篇文章主要介紹了JS實現(xiàn)復制內容到剪貼板功能兼容所有瀏覽器(推薦)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jQuery源碼解讀之removeClass()方法,以注釋形式較為詳細的分析了removeClass()方法的實現(xiàn)技巧與使用注意事項,需要的朋友可以參考下2015-02-02
jQuery利用cookie 實現(xiàn)本地收藏功能(不重復無需多次命名)
cookie 是存儲于訪問者計算機中的變量。這篇文章主要介紹了jQuery利用cookie 實現(xiàn)本地收藏功能不重復無需多次命名,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了JQuery對表格進行操作的常用技巧,需要的朋友可以參考下2014-04-04
jQuery插件FusionCharts繪制的3D餅狀圖效果實例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D餅狀圖效果,結合完整實例形式分析了基于FusionCharts圖形插件繪制餅狀圖的操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03