專利名稱：一種集中控制web頁面事件與狀態(tài)的裝置和方法
ー種集中控制WEB頁面事件與狀態(tài)的裝置和方法
技術(shù)領(lǐng)域：
本發(fā)明涉及WEB開發(fā)領(lǐng)域，特別涉及ー種集中控制WEB頁面事件與狀態(tài)的裝置和方法。
背景技木隨著WEB應(yīng)用越來越深入地發(fā)展，網(wǎng)站上網(wǎng)頁的開發(fā)也越來越復(fù)雜。如今，可與用戶進行交互的網(wǎng)頁已經(jīng)隨處可見，而這一功能的實現(xiàn)，正是有賴于HTML的事件以及事件處 理機制。用戶與網(wǎng)頁交互時產(chǎn)生的操作，稱為事件，事件可以由用戶引發(fā)，也可能是頁面發(fā)生改變觸發(fā)，甚至還有用戶看不見的事件(如Ajax的交互進度改變)。絕大部分事件都由用戶的動作所引發(fā)，如用戶按鼠標(biāo)的按鈕，就產(chǎn)生click事件，若鼠標(biāo)的指針在鏈接上移動，就產(chǎn)生mouseover事件等等。HTML 4的新特性之一是可以使HTML事件觸發(fā)瀏覽器中的行為，比方說當(dāng)用戶點擊某個HTML元素時啟動一段JavaScript。在現(xiàn)代瀏覽器中都內(nèi)置有大量的事件處理器，這些處理器會監(jiān)視特定的條件或用戶行為，例如鼠標(biāo)單擊或瀏覽器窗口中完成加載某個圖像，通過使用客戶端的JavaScript，可以將某些特定的事件處理器作為屬性添加給特定的標(biāo)簽，并可以在事件發(fā)生時執(zhí)行ー個或多個JavaScript命令或函數(shù)。為了簡化開發(fā)人員的工作量，目前在網(wǎng)站的前端開發(fā)中出現(xiàn)了ー些框架級的產(chǎn)品，例如現(xiàn)有的Jquery控件庫，利用這些控件庫，開發(fā)人員可以很方便地搭建用戶界面。然而考慮到事件管理機制，無論是這些控件庫還是瀏覽器本身，都是以單個控件為單位對事件進行管理的，控件與控件之間沒有邏輯關(guān)系，例如從業(yè)務(wù)邏輯上說，一個控件得到焦點(onfocus)必然伴隨著另一個控件失去焦點(onblur),但現(xiàn)有的瀏覽器事件管理模式與現(xiàn)有的控件庫產(chǎn)品中的事件管理模式均只對單個控件進行事件管理，即在ー個控件得到焦點吋，并不關(guān)心另ー個控件是否失去焦點，這是由于瀏覽器事件缺少上下文(context)狀態(tài)的管理，即事件與事件之間是割裂的，不考慮每個事件與之前或之后的事件之間的關(guān)聯(lián)關(guān)系，因此每個控件分別單獨維護各自的事件狀態(tài)，這種機制常常難以滿足復(fù)雜的業(yè)務(wù)需求。例如日歷顯示時，點擊非日歷區(qū)域，需要隱藏日歷區(qū)域，傳統(tǒng)的做法必須要監(jiān)聽頁面的點擊事件，得到事件后，判斷事件觸發(fā)點是否在日歷區(qū)域內(nèi)，不在則隱藏日歷區(qū)域。也就是說，無論是任何控件，想要實現(xiàn)相同的業(yè)務(wù)邏輯(即隱藏)，都必須針對這個控件進行上述的一系列操作，這種做法無疑增加了開發(fā)人員的工作量，同時由于針對相同的業(yè)務(wù)邏輯，產(chǎn)生了很多重復(fù)的代碼，也降低了運行的效率。

發(fā)明內(nèi)容本發(fā)明所要解決的技術(shù)問題是降低開發(fā)人員的開發(fā)難度，減少開發(fā)人員的工作量，提聞系統(tǒng)運行的效率。本發(fā)明為解決技術(shù)問題而采用的技術(shù)方案是提供了ー種集中控制WEB頁面事件與狀態(tài)的裝置，包括事件監(jiān)聽單元，用于獲取瀏覽器事件，所述瀏覽器事件是從瀏覽器文檔對象捕獲的事件或控件模塊請求提交的事件；復(fù)合事件生成単元，用于從狀態(tài)存儲器讀取狀態(tài)變量，井根據(jù)所述狀態(tài)變量和所述瀏覽器事件，生成復(fù)合事件；事件分發(fā)單元，用于將所述瀏覽器事件與所述復(fù)合事件分發(fā)給對應(yīng)的控件進行處理；狀態(tài)管理単元，用于更新所述狀態(tài)存儲器中所述狀態(tài)變量的記錄。根據(jù)本發(fā)明之一優(yōu)選實施方式，所述狀態(tài)變量進一歩包括事件的狀態(tài)變量、控件的狀態(tài)變量、鼠標(biāo)的狀態(tài)變量及鍵盤的狀態(tài)變量。 根據(jù)本發(fā)明之一優(yōu)選實施方式，所述事件的狀態(tài)變量進ー步包括用于記錄之前一個或多個時刻發(fā)生的對下ー個時刻的復(fù)合事件的生成產(chǎn)生影響的所述瀏覽器事件或所述復(fù)合事件的變量。根據(jù)本發(fā)明之一優(yōu)選實施方式，所述控件的狀態(tài)變量進ー步包括用于記錄當(dāng)前被激活的控件、當(dāng)前被按壓的控件、當(dāng)前被拖拽的控件、當(dāng)前被縮放的控件及當(dāng)前處于選擇框范圍內(nèi)的控件的變量。根據(jù)本發(fā)明之一優(yōu)選實施方式，所述鼠標(biāo)的狀態(tài)變量進ー步包括用于記錄當(dāng)前鼠標(biāo)點擊是否被屏蔽及當(dāng)前鼠標(biāo)所處的坐標(biāo)的變量。根據(jù)本發(fā)明之一優(yōu)選實施方式，所述復(fù)合事件進ー步包括瀏覽器自身沒有的或不完善的事件的改進事件。根據(jù)本發(fā)明之一優(yōu)選實施方式，所述復(fù)合事件進ー步包括在事件源控件的相關(guān)控件上觸發(fā)的ー組事件。根據(jù)本發(fā)明之一優(yōu)選實施方式，所述狀態(tài)管理單元還用于接收并響應(yīng)所述控件模塊的請求，在請求成功時根據(jù)所述請求改變所述狀態(tài)存儲器中的所述狀態(tài)變量的記錄。本發(fā)明還提供了ー種集中控制WEB頁面事件與狀態(tài)的方法，包括a.獲取瀏覽器事件，所述瀏覽器事件是從瀏覽器文檔對象捕獲的事件或控件模塊請求提交的事件山.從所述狀態(tài)存儲器讀取狀態(tài)變量，井根據(jù)所述狀態(tài)變量和所述瀏覽器事件，生成復(fù)合事件；
c.將所述瀏覽器事件或所述復(fù)合事件分發(fā)給對應(yīng)的控件進行處理；d.更新所述狀態(tài)存儲器中所述狀態(tài)變量的記錄。根據(jù)本發(fā)明的一優(yōu)選實施方式，所述狀態(tài)變量進一歩包括事件的狀態(tài)變量、控件的狀態(tài)變量、鼠標(biāo)的狀態(tài)變量及鍵盤的狀態(tài)變量。根據(jù)本發(fā)明的一優(yōu)選實施方式，所述事件的狀態(tài)變量進ー步包括用于記錄之前一個或多個時刻發(fā)生的對復(fù)合事件的生成產(chǎn)生影響的事件的變量。根據(jù)本發(fā)明的一優(yōu)選實施方式，所述控件的狀態(tài)變量進ー步包括用于記錄當(dāng)前被激活的控件、當(dāng)前被按壓的控件、當(dāng)前被拖拽的控件、當(dāng)前被縮放的控件及當(dāng)前處于選擇框范圍內(nèi)的控件的變量。根據(jù)本發(fā)明的一優(yōu)選實施方式，所述鼠標(biāo)的狀態(tài)變量進ー步包括用于記錄當(dāng)前鼠標(biāo)點擊是否被屏蔽及當(dāng)前鼠標(biāo)所處的坐標(biāo)的變量。根據(jù)本發(fā)明的一優(yōu)選實施方式，所述復(fù)合事件進ー步包括瀏覽器自身沒有的或不完善的事件的改進事件。根據(jù)本發(fā)明的一優(yōu)選實施方式，所述復(fù)合事件進ー步包括在事件源控件的相關(guān)控件上觸發(fā)的ー組事件。
根據(jù)本發(fā)明的一優(yōu)選實施方式，所述方法還包括接收所述控件模塊的請求，在所述請求成功時根據(jù)所述請求改變所述狀態(tài)存儲器中的所述狀態(tài)變量的記錄。由以上技術(shù)方案可以看出，通過弓I入集中的狀態(tài)管理，考慮了事件與事件，事件與控件，控件與控件之間的邏輯聯(lián)系，并生成相應(yīng)的復(fù)合事件，可以實現(xiàn)從框架層面上對事件的集中管理，從而擺脫了以單個控件為單位進行事件管理的機制，避免開發(fā)人員針對每個控件都必須定義ー套事件處理流程，很好地減輕了開發(fā)人員的工作難度，同時也減少了整個系統(tǒng)的代碼量，能夠提高系統(tǒng)的運行效率。

圖I是本發(fā)明實施例中的集中控制WEB頁面事件與狀態(tài)的裝置結(jié)構(gòu)示意圖；圖2是本發(fā)明實施例中的部分瀏覽器對象模型(BOM)結(jié)構(gòu)示意圖； 圖3是本發(fā)明實施例中的集中控制WEB頁面事件與狀態(tài)的方法流程示意圖。
具體實施方式為了使本發(fā)明的目的、技術(shù)方案和優(yōu)點更加清楚，下面結(jié)合附圖和具體實施例對本發(fā)明進行詳細(xì)描述。請參考圖1，圖I為集中控制WEB頁面事件與狀態(tài)的裝置結(jié)構(gòu)示意圖。集中控制WEB頁面事件和狀態(tài)的裝置包括事件監(jiān)聽單元101、復(fù)合事件生成單元102、事件分發(fā)單元103及狀態(tài)管理単元104。事件監(jiān)聽單元101，用于獲取瀏覽器事件，所述瀏覽器事件是從瀏覽器文檔對象(Document)捕獲的事件或控件模塊請求提交的事件。根據(jù)瀏覽器對象模型(BOM)，瀏覽器對象具有樹狀結(jié)果，如圖2所示，為部分瀏覽器對象模型結(jié)構(gòu)示意圖。Document對象代表了整個HTML文檔，根據(jù)瀏覽器的事件處理機制，若不阻止事件的傳播，事件會從發(fā)生的源節(jié)點對象逐層冒泡，直到根節(jié)點。例如下面的HTML代碼 <html> <head> </head>
くbody onclick="alert('body')">
<a href="#" onclick="alert('a')">clickme!</a>
</body>
</html>分別在ー個a標(biāo)簽與body標(biāo)簽上注冊了ー個click事件監(jiān)聽函數(shù)，由于在a標(biāo)簽的事件監(jiān)聽函數(shù)中未阻止事件的傳播，因此click事件會向上傳播，這樣，當(dāng)用戶點擊超鏈接時，將分別按順序顯示a警告窗ロ與body警告窗ロ。因此，在本發(fā)明中，為了對事件進行集中控制，事件監(jiān)聽單元會從Document對象捕獲發(fā)生的事件，以進行后續(xù)的處理。
但是有的業(yè)務(wù)邏輯需要在某個DOM節(jié)點(即某個標(biāo)簽)處阻止事件冒泡，例如在某個標(biāo)簽的監(jiān)聽函數(shù)中阻止事件的傳播,這樣就會導(dǎo)致Document對象無法捕獲事件。為了解決這個問題，本發(fā)明在控件(即DOM節(jié)點的封裝)需要阻止事件傳播時，可在取消事件傳播之前，由控件模塊向本裝置發(fā)出提交事件的請求，因此，事件監(jiān)聽單元還用于接收控件模塊請求提交的事件。上述過程可通過偽代碼描述如下
<div onmousedown=，，cancelBubble()，，>. . </div>//理解為控件
//事件監(jiān)聽函數(shù)
function cancelBubDlei event)]
framework.fireEvent(event); //發(fā)出提叉事件的請求 event.stopPropagation(); //取消事件冒泡
}復(fù)合事件生成単元102，用于從狀態(tài)存儲器讀取狀態(tài)變量，并根據(jù)狀態(tài)變量和事件監(jiān)聽單元101中所述的瀏覽器事件，生成復(fù)合事件。如果狀態(tài)變量的值決定了不需要生成復(fù)合事件，則不產(chǎn)生復(fù)合事件。復(fù)合事件主要是指瀏覽器自身沒有的或者是不完善的事件的改進事件，也包括在事件源控件的相關(guān)控件上觸發(fā)的ー組事件。前者例如激活(onfocus)/失焦(onblur)事件，在傳統(tǒng)的瀏覽器事件模式中只有表單元素才能觸發(fā)onfocus/onblur事件,而在本發(fā)明中，將激活/失焦概念擴展到了所有控件上。后者主要是指考慮了控件父子關(guān)系的事件，在傳統(tǒng)的瀏覽器事件模式中，如果控件B是控件A的子控件，B的onfocus很可能會導(dǎo)致A的onblur，這是不符合應(yīng)用邏輯的，而在本發(fā)明中，如果控件之間有父子關(guān)系，那么在父控件/子控件上發(fā)生事件的時候，會在子控件/父控件上也觸發(fā)符合應(yīng)用邏輯的事件。典型的復(fù)合事件及其事件邏輯主要有I.顯示(onshow) /隱藏(onhide):控件的顯示與隱藏受到其關(guān)聯(lián)的父控件的顯示/隱藏的影響而觸發(fā)。2.激活(onfocus)/失焦(onblur):在鼠標(biāo)觸發(fā)mousedown事件時，獲取發(fā)生這次事件對應(yīng)的控件，假設(shè)該控件為A，如果在無控件區(qū)域，對應(yīng)的控件為NULL，當(dāng)前被激活的控件假設(shè)為B，則控件B及其父控件將觸發(fā)onblur事件，而控件A及其父控件將觸發(fā)onfocus事件。如果某個控件在此階段需要先后觸發(fā)onblur與onfocus,將不進行操作。有了 onfocus/onblur事件后，在現(xiàn)有技術(shù)中點擊非日歷區(qū)域需要隱藏日歷區(qū)域的操作，就只需要在onblur事件處理函數(shù)中加入隱藏日歷控件的業(yè)務(wù)代碼。同樣地，其他任何控件要有類似邏輯的業(yè)務(wù)需求，都可以不用重新再寫ー套判斷邏輯，只需要在onblur事件處理函數(shù)中加入隱藏自己的業(yè)務(wù)代碼。
3.鼠標(biāo)移入(onmouseover) /移出(onmouseout):在傳統(tǒng)的瀏覽器事件模式中，從一個父控件往其子控件移入時，父控件也將產(chǎn)生移出事件，這不符合一般的業(yè)務(wù)邏輯，因此在本發(fā)明中直接忽略原生的onmouseout事件,而在onmouseover中復(fù)合產(chǎn)生符合一般業(yè)務(wù)邏輯的onmouseout事件。
4.拖拽(ondrag林**)/ 縮放(onzoom****)/ 選擇(onselect****) :**** 包括start、move、end。鼠標(biāo)左鍵點擊時,通過本裝置提供的API接ロ，控件模塊可以向本裝置發(fā)出請求，將本裝置設(shè)置為特殊的狀態(tài)，此時，隨鼠標(biāo)的移動將會產(chǎn)生相應(yīng)的ondragmove/onzoommove/onselectmove事件,在鼠標(biāo)左鍵彈起時,本裝置將解除相關(guān)的特殊狀態(tài)，鼠標(biāo)移動事件恢復(fù)正常。本發(fā)明中，對所有的狀態(tài)進行了集中管理，為此，在本發(fā)明中有一狀態(tài)存儲器保存了ー組狀態(tài)變量，包括事件的狀態(tài)變量、控件的狀態(tài)變量、鼠標(biāo)的狀態(tài)變量及鍵盤的狀態(tài)變量，用于記錄各種狀態(tài)。事件的狀態(tài)變量主要是用于記錄之前ー個或多個時刻發(fā)生的對下ー個時刻的復(fù)合事件的生成產(chǎn)生影響的瀏覽器事件或復(fù)合事件的變量?？丶臓顟B(tài)變量主要包括用于記錄當(dāng)前被激活的控件、當(dāng)前被按壓/松開的控件、當(dāng)前被拖拽的控件、當(dāng)前被縮放的控件及當(dāng)前處于選擇框范圍內(nèi)的控件的變量。當(dāng)前被激活指的是鼠標(biāo)左鍵在控件區(qū)域內(nèi)點擊，當(dāng)前被按壓指的是鼠標(biāo)在控件上按下未彈起之前，當(dāng)前被松開指的是鼠標(biāo)在控件上彈起。當(dāng)前被按壓/松開這種狀態(tài)之所以需要記錄，是因為有些控件需要在鼠標(biāo)按壓時設(shè)置成某種特殊的狀態(tài)，而在鼠標(biāo)松開時解除這種狀態(tài)，并且可以允許松開事件與按壓事件發(fā)生在不同的控件上，例如當(dāng)鼠標(biāo)在控件A上按壓時，控件A被設(shè)置為特殊的狀態(tài)，當(dāng)鼠標(biāo)移動到控件B處松開時，控件A的特殊狀態(tài)被釋放。這樣的應(yīng)用邏輯用普通的mousedown事件與mouseup事件是難以實現(xiàn)的，因為當(dāng)控件A的特殊狀態(tài)被釋放時，mouseup事件已經(jīng)發(fā)生在不同的控件上了，因此在控件A上就難以獲取到鼠標(biāo)松開的狀態(tài)，為了解決這個問題，可以利用當(dāng)前被按壓/松開的控件這樣的狀態(tài)變量，來生成復(fù)合事件pressstart/pressend,這樣,在上面的例子中，就可以在控件A的pressstart事件處理函數(shù)中設(shè)置A的特殊狀態(tài)，在控件A的pressend事件處理函數(shù)中解除A的特殊狀態(tài)。用偽代碼描述如下
A.onpressstart = function ()
{
Manager. setState();
}
A.onpressend = function ()
{
Manager.releaseState();
}鼠標(biāo)的狀態(tài)變量主要包括用于記錄當(dāng)前鼠標(biāo)點擊是否被屏蔽及當(dāng)前鼠標(biāo)所處的坐標(biāo)的變量。鼠標(biāo)點擊被屏蔽指的是忽略鼠標(biāo)的點擊信息。如果鼠標(biāo)點擊被屏蔽，這時鼠標(biāo)在控件上的點擊就不會引起該控件的激活。這種狀態(tài)在下拉框與置頂窗體時需要使用。當(dāng)前鼠標(biāo)所處的坐標(biāo)變量，是為了用來記錄當(dāng)前鼠標(biāo)的坐標(biāo)的，這是因為對于某些事件來說，是無法直接通過瀏覽器接ロ獲取到鼠標(biāo)坐標(biāo)的，為了使這些事件也能訪問到鼠標(biāo)的位置，就需要有一個記錄當(dāng)前鼠標(biāo)所處的坐標(biāo)的變量。鍵盤的狀態(tài)變量主要是用來記錄在鍵盤按鍵被按下時獲取到的按鍵值的。這是因為在按下ー個按鍵時，將依次觸發(fā)keydown與keypress事件,如果按下的正好是功能鍵(即鍵盤上的Fl至F12，方向鍵等)，那么在keypress事件中是不能獲取到按鍵值的，因此如果想要在keypress事件中得到功能鍵的值，那么就需要有一個鍵盤的狀態(tài)變量來記錄這個值。另外，由于有了這個狀態(tài)變量，當(dāng)keydown與keyup成對發(fā)生時,如果控件的狀態(tài)變量發(fā)生了改變(即當(dāng)前控件發(fā)生了變化)，則可以判斷不能觸發(fā)ー個按(包括按下和彈起)某個按鍵的復(fù)合事件，這是很顯然的，當(dāng)keydown與keyup發(fā)生在不同鍵上時，自然不該把它視為發(fā)生在同一個鍵上進行處理，這與mousedown和mouseup發(fā)生在不同的位置時，就不應(yīng)該生成ー個click事件的道理一致。事件分發(fā)單元103，用于將事件監(jiān)聽單元101中所述的瀏覽器事件或復(fù)合事件生成單元102中所述的復(fù)合事件分發(fā)給對應(yīng)的控件進行處理。狀態(tài)管理單元104，用于更新狀態(tài)存儲器中狀態(tài)變量的記錄。在得到瀏覽器事件或生成復(fù)合事件之后，需要將各種狀態(tài)變量的值進行更新保存，為下一次復(fù)合事件生成的計算提供依據(jù)。例如在復(fù)合事件生成單元中所述的記錄當(dāng)前鼠標(biāo)所處坐標(biāo)的這個狀態(tài)變量，它是通過mousemove事件來傳遞的，即得到mousemove事件后,應(yīng)相應(yīng)地更新當(dāng)前鼠標(biāo)所處的坐標(biāo)變量值。又例如在復(fù)合事件生成單元中所述的能夠為keypress事件獲取功能鍵值提供依據(jù)的狀態(tài)變量，是通過keydown事件來傳遞的，即得到kevdown事件后,應(yīng)相應(yīng)地更新鍵盤的狀態(tài)變量值。此外，由于本裝置對控件模塊提供了開發(fā)用的API接ロ，當(dāng)開發(fā)人員調(diào)用這些API接ロ時，可以向本裝置發(fā)出請求，將本裝置設(shè)置為某些特殊的狀態(tài)，如果請求成功，狀態(tài)管理單元就會相應(yīng)地更改狀態(tài)存儲器中的某些狀態(tài)變量的值，這樣，在下一步復(fù)合事件生成的計算吋，根據(jù)這些狀態(tài)變量的值，就會產(chǎn)生符合業(yè)務(wù)需求的復(fù)合事件，因此狀態(tài)管理単元還用于接收控件模塊的請求，在請求成功時根據(jù)請求改變狀態(tài)存儲器中的狀態(tài)變量的記求。下面以具體的實施方式來說明上述裝置的執(zhí)行過程實施方式一對于控件A，業(yè)務(wù)要求其可以進行拖拽操作。這時首先在A上進行了鼠標(biāo)按下操作，事件監(jiān)聽單元捕獲到mousedown事件,事件分發(fā)單元將mousedown事件分發(fā)至控件A,由于控件A可以進行拖拽操作，所以控件A在mousedown事件處理函數(shù)中向本裝置發(fā)出拖拽(drag)請求，這個過程可以如下列偽代碼所述、A. onmousedown = function ()
{
eventManager startDrag();
}如果請求成功，狀態(tài)管理單元將改變狀態(tài)存儲器中相應(yīng)狀態(tài)變量的記錄，使本裝置進入特殊的drag模式,這時在A上發(fā)生鼠標(biāo)移動操作,事件監(jiān)聽單元捕獲到mousemove,復(fù)合事件生成單元根據(jù)狀態(tài)變量的記錄，生成dragmove事件,事件分發(fā)單元將dragmove事件分發(fā)至控件A。最后在A上發(fā)生鼠標(biāo)彈起操作，事件監(jiān)聽單元捕獲到mouseup，事件生成單元根據(jù)狀態(tài)變量的記錄生成dragend事件,事件分發(fā)單元將dragend分發(fā)至控件A,狀態(tài)管理単元改變狀態(tài)存儲器中相應(yīng)的狀態(tài)變量的記錄，解除本裝置的drag模式，最后事件分 發(fā)單元將mouseup事件分發(fā)至控件A。上述說明以簡單的流程表示為鼠標(biāo)down操作ー> 裝置通知控件觸發(fā)mousedown事件一> 控件通知裝置需要拖拽一> 所有的mousemove事件經(jīng)過處理后復(fù)合成dragmove—>鼠標(biāo)up操作一> 裝置通知控件觸發(fā)dragend,并解除拖拽一> 裝置通知控件觸發(fā)mouseup事件。實施方式ニ 存在著A、B兩個控件，B控件為當(dāng)前激活的控件，此時在A控件上發(fā)生了鼠標(biāo)按下操作，事件監(jiān)聽單元捕獲到mousedown事件,復(fù)合事件生成單元根據(jù)狀態(tài)變量生成onblur/onfocus事件,事件分發(fā)單元將先后向A控件發(fā)送mousedown事件，向B控件及其父控件發(fā)送onblur事件，向A控件及其父控件發(fā)送onfocus事件,狀態(tài)管理單元更改狀態(tài)存儲器中的狀態(tài)變量的記錄，將當(dāng)前激活的控件改為A。請參考圖3，圖3為集中控制WEB頁面事件與狀態(tài)的方法流程示意圖。集中控制WEB頁面事件和狀態(tài)的方法包括步驟201 :獲取瀏覽器事件，所述瀏覽器事件是從瀏覽器文檔對象捕獲的事件或控件模塊請求提交的事件。根據(jù)瀏覽器對象模型(BOM)，瀏覽器對象具有樹狀結(jié)果，如圖2所示，為部分瀏覽器對象模型結(jié)構(gòu)示意圖。Document對象代表了整個HTML文檔，根據(jù)瀏覽器的事件處理機制，若不阻止事件的傳播，事件會從發(fā)生的源節(jié)點對象逐層冒泡，直到根節(jié)點。例如下面的HTML代碼
<html>
<head>
</head>
くbody onclick="alert('body')">
<a href="#" onclick="alert('a')">clickme!</a>
</body>
</html>
分別在ー個a標(biāo)簽與body標(biāo)簽上注冊了ー個click事件監(jiān)聽函數(shù)，由于在a標(biāo)簽的事件監(jiān)聽函數(shù)中未阻止事件的傳播，因此click事件會向上傳播，這樣，當(dāng)用戶點擊超鏈接時，將分別按順序顯示a警告窗ロ與body警告窗ロ。因此，在本發(fā)明中，為了對事件進行集中控制，首先要從Document對象捕獲發(fā)生的事件，以進行后續(xù)的處理。但是有的業(yè)務(wù)邏輯需要在某個DOM節(jié)點(即某個標(biāo)簽)處阻止事件冒泡，例如在某個標(biāo)簽的監(jiān)聽函數(shù)中阻止事件的傳播,這樣就會導(dǎo)致Document對象無法捕獲事件。為了解決這個問題，本發(fā)明在控件(即DOM節(jié)點的封裝)需要阻止事件傳播時，可在取消事件傳播之前，由控件模塊發(fā)出提交事件的請求，這時需要接收控件模塊請求提交的事件。上述過程可通過偽代碼描述如下
<div onmousedown=，，cancelBubble()，，>. . </div>//理解為控件 //事件監(jiān)聽函數(shù)
iunction cancelBubolei event) ^
framework.fireEvent(event); //發(fā)出提交事件的請求event.stopPropagation(); //取消事件冒泡
}步驟202 :從狀態(tài)存儲器讀取狀態(tài)變量，并根據(jù)狀態(tài)變量和步驟201中所述的瀏覽器事件，生成復(fù)合事件。如果狀態(tài)變量的值決定了不需要生成復(fù)合事件，則不產(chǎn)生復(fù)合事件。復(fù)合事件主要是指瀏覽器自身沒有的或者是不完善的事件的改進事件，也包括在事件源控件的相關(guān)控件上觸發(fā)的ー組事件。前者例如激活(onfocus)/失焦(onblur)事件，在傳統(tǒng)的瀏覽器事件模式中只有表單元素才能觸發(fā)onfocus/onblur事件,而在本發(fā)明中，將激活/失焦概念擴展到了所有控件上。后者主要是指考慮了控件父子關(guān)系的事件，在傳統(tǒng)的瀏覽器事件模式中，如果控件B是控件A的子控件，B的onfocus很可能會導(dǎo)致A的onblur，這是不符合應(yīng)用邏輯的，而在本發(fā)明中，如果控件之間有父子關(guān)系，那么在父控件/子控件上發(fā)生事件的時候，會在子控件/父控件上也觸發(fā)符合應(yīng)用邏輯的事件。典型的復(fù)合事件及其事件邏輯主要有I.顯示(onshow) /隱藏(onhide):控件的顯示與隱藏受到其關(guān)聯(lián)的父控件的顯示/隱藏的影響而觸發(fā)。2.激活(onfocus)/失焦(onblur):在鼠標(biāo)觸發(fā)mousedown事件時，獲取發(fā)生這次事件對應(yīng)的控件，假設(shè)該控件為A，如果在無控件區(qū)域，對應(yīng)的控件為NULL，當(dāng)前被激活的控件假設(shè)為B，則控件B及其父控件將觸發(fā)onblur事件，而控件A及其父控件將觸發(fā)onfocus事件。如果某個控件在此階段需要先后觸發(fā)onblur與onfocus,將不進行操作。有了 onfocus/onblur事件后，在現(xiàn)有技術(shù)中點擊非日歷區(qū)域需要隱藏日歷區(qū)域的操作，就只需要在onblur事件處理函數(shù)中加入隱藏日歷控件的業(yè)務(wù)代碼。同樣地，其他任何控件要有類似邏輯的業(yè)務(wù)需求，都可以不用重新再寫ー套判斷邏輯，只需要在onblur事件處理函數(shù)中加入隱藏自己的業(yè)務(wù)代碼。3.鼠標(biāo)移入(onmouseover)/移出(onmouseout):在傳統(tǒng)的瀏覽器事件模式中，從一個父控件往其子控件移入時，父控件也將產(chǎn)生移出事件，這不符合一般的業(yè)務(wù)邏輯，因此在本發(fā)明中直接忽略原生的onmouseout事件,而在onmouseover中復(fù)合產(chǎn)生符合一般業(yè)務(wù)邏輯的onmouseout事件。4.拖拽(ondrag****)/ 縮放(onzoom****)/ 選擇(onselect****) :**** 包括start、move、end。鼠標(biāo)左鍵點擊時,通過本裝置提供的API接ロ，控件模塊可以向本裝置發(fā)出請求，將本裝置設(shè)置為特殊的狀態(tài)，此時，隨鼠標(biāo)的移動將會產(chǎn)生相應(yīng)的ondragmove/onzoommove/onselectmove事件,在鼠標(biāo)左鍵彈起時,本裝置將解除相關(guān)的特殊狀態(tài)，鼠標(biāo)移動事件恢復(fù)正常。本發(fā)明中，對所有的狀態(tài)進行了集中管理，為此，在本發(fā)明中有一狀態(tài)存儲器保存了ー組狀態(tài)變量，包括事件的狀態(tài)變量、控件的狀態(tài)變量、鼠標(biāo)的狀態(tài)變量及鍵盤的狀態(tài)變 量，用于記錄各種狀態(tài)。事件的狀態(tài)變量主要是用于記錄之前ー個或多個時刻發(fā)生的對下ー個時刻的復(fù)合事件的生成產(chǎn)生影響的瀏覽器事件或復(fù)合事件的變量。控件的狀態(tài)變量主要包括用于記錄當(dāng)前被激活的控件、當(dāng)前被按壓/松開的控件、當(dāng)前被拖拽的控件、當(dāng)前被縮放的控件及當(dāng)前處于選擇框范圍內(nèi)的控件的變量。當(dāng)前被激活指的是鼠標(biāo)左鍵在控件區(qū)域內(nèi)點擊，當(dāng)前被按壓指的是鼠標(biāo)在控件上按下未彈起之前，當(dāng)前被松開指的是鼠標(biāo)在控件上彈起。當(dāng)前被按壓/松開這種狀態(tài)之所以需要記錄，是因為有些控件需要在鼠標(biāo)按壓時設(shè)置成某種特殊的狀態(tài)，而在鼠標(biāo)松開時解除這種狀態(tài)，并且可以允許松開事件與按壓事件發(fā)生在不同的控件上，例如當(dāng)鼠標(biāo)在控件A上按壓吋，控件A被設(shè)置為特殊的狀態(tài)，當(dāng)鼠標(biāo)移動到控件B處松開時，控件A的特殊狀態(tài)被釋放。這樣的應(yīng)用邏輯用普通的mousedown事件與mouseup事件是難以實現(xiàn)的，因為當(dāng)控件A的特殊狀態(tài)被釋放時，mouseup事件已經(jīng)發(fā)生在不同的控件上了，因此在控件A上就難以獲取到鼠標(biāo)松開的狀態(tài)，為了解決這個問題，可以利用當(dāng)前被按壓/松開的控件這樣的狀態(tài)變量，來生成復(fù)合事件pressstart/pressend,這樣,在上面的例子中，就可以在控件A的pressstart事件處理函數(shù)中設(shè)置A的特殊狀態(tài)，在控件A的pressend事件處理函數(shù)中解除A的特殊狀態(tài)。用偽代碼描述如下
A.onpressstart = function ()
{
Manager. setStateQ;
}
A.onpressend = mnction ()

{
Manager.releaseState();
}鼠標(biāo)的狀態(tài)變量主要包括用于記錄當(dāng)前鼠標(biāo)點擊是否被屏蔽及當(dāng)前鼠標(biāo)所處的坐標(biāo)的變量。鼠標(biāo)點擊被屏蔽指的是忽略鼠標(biāo)的點擊信息。如果鼠標(biāo)點擊被屏蔽，這時鼠標(biāo)在控件上的點擊就不會引起該控件的激活。這種狀態(tài)在下拉框與置頂窗體時需要使用。當(dāng)前鼠標(biāo)所處的坐標(biāo)變量，是為了用來記錄當(dāng)前鼠標(biāo)的坐標(biāo)的，這是因為對于某些事件來說，是無法直接通過瀏覽器接ロ獲取到鼠標(biāo)坐標(biāo)的，為了使這些事件也能訪問到鼠標(biāo)的位置，就需要有一個記錄當(dāng)前鼠標(biāo)所處的坐標(biāo)的變量。鍵盤的狀態(tài)變量主要是用來記錄在鍵盤按鍵被按下時獲取到的按鍵值的。這是因為在按下ー個按鍵時，將依次觸發(fā)keydown與keypress事件,如果按下的正好是功能鍵(即鍵盤上的Fl至F12，方向鍵等)，那么在keypress事件中是不能獲取到按鍵值的，因此如果想要在keypress事件中得到功能鍵的值，那么就需要有一個鍵盤的狀態(tài)變量來記錄這個值。另外，由于有了這個狀態(tài)變量，當(dāng)keydown與keyup成對發(fā)生時,如果控件的狀態(tài)變量發(fā)生了改變(即當(dāng)前控件發(fā)生了變化)，則可以判斷不能觸發(fā)ー個按(包括按下和彈起)某個按鍵的復(fù)合事件，這是很顯然的，當(dāng)keydown與keyup發(fā)生在不同鍵上時，自然不該把它視為發(fā)生在同一個鍵上進行處理，這與mousedown和mouseup發(fā)生在不同的位置時，就不應(yīng)該生成ー個click事件的道理一致。步驟203 :將步驟201中所述的瀏覽器事件或步驟202中所述的復(fù)合事件分發(fā)給對應(yīng)的控件進行處理。步驟204 :更新狀態(tài)存儲器中狀態(tài)變量的記錄。在得到瀏覽器事件或生成復(fù)合事件之后，需要將各種狀態(tài)變量的值進行更新保存，為下一次復(fù)合事件生成的計算提供依據(jù)。例如在復(fù)合事件生成單元中所述的記錄當(dāng)前鼠標(biāo)所處坐標(biāo)的這個狀態(tài)變量，它是通過mousemove事件來傳遞的，即得到mousemove事件后,應(yīng)相應(yīng)地更新當(dāng)前鼠標(biāo)所處的坐標(biāo)變量值。又例如在復(fù)合事件生成單元中所述的能夠為keypress事件獲取功能鍵值提供依據(jù)的狀態(tài)變量，是通過keydown事件來傳遞的，即得到keydown事件后,應(yīng)相應(yīng)地更新鍵盤的狀態(tài)變量值。此外,本方法進ー步還包括步驟205 :接收并響應(yīng)控件模塊發(fā)出的請求,在請求成功時根據(jù)請求改變狀態(tài)存儲器中的狀態(tài)變量的記錄。以上所述僅為本發(fā)明的較佳實施例而已，并不用以限制本發(fā)明，凡在本發(fā)明的精神和原則之內(nèi)，所做的任何修改、等同替換、改進等，均應(yīng)包含在本發(fā)明保護的范圍之內(nèi)。
權(quán)利要求
1.ー種集中控制WEB頁面事件與狀態(tài)的裝置，其特征在于，所述裝置包括 事件監(jiān)聽單元，用于獲取瀏覽器事件，所述瀏覽器事件是從瀏覽器文檔對象捕獲的事件或控件模塊請求提交的事件； 復(fù)合事件生成単元，用于從狀態(tài)存儲器讀取狀態(tài)變量，井根據(jù)所述狀態(tài)變量和所述瀏覽器事件，生成復(fù)合事件； 事件分發(fā)單元，用于將所述瀏覽器事件或所述復(fù)合事件分發(fā)給對應(yīng)的控件進行處理； 狀態(tài)管理単元，用于更新所述狀態(tài)存儲器中所述狀態(tài)變量的記錄。
2.根據(jù)權(quán)利要求I所述的集中控制WEB頁面事件與狀態(tài)的裝置，其特征在于，所述狀態(tài)變量進一歩包括事件的狀態(tài)變量、控件的狀態(tài)變量、鼠標(biāo)的狀態(tài)變量及鍵盤的狀態(tài)變量。
3.根據(jù)權(quán)利要求2所述的集中控制WEB頁面事件與狀態(tài)的裝置，其特征在于，所述事件的狀態(tài)變量進ー步包括用于記錄之前一個或多個時刻發(fā)生的對下ー個時刻的所述復(fù)合事件的生成產(chǎn)生影響的所述瀏覽器事件或所述復(fù)合事件的變量。
4.根據(jù)權(quán)利要求2所述的集中控制WEB頁面事件與狀態(tài)的裝置，其特征在于，所述控件的狀態(tài)變量進ー步包括用于記錄當(dāng)前被激活的控件、當(dāng)前被按壓的控件、當(dāng)前被拖拽的控件、當(dāng)前被縮放的控件及當(dāng)前處于選擇框范圍內(nèi)的控件的變量。
5.根據(jù)權(quán)利要求2所述的集中控制WEB頁面事件與狀態(tài)的裝置，其特征在于，所述鼠標(biāo)的狀態(tài)變量進ー步包括用于記錄當(dāng)前鼠標(biāo)點擊是否被屏蔽及當(dāng)前鼠標(biāo)所處的坐標(biāo)的變量。
6.根據(jù)權(quán)利要求I所述的集中控制WEB頁面事件與狀態(tài)的裝置，其特征在于，所述復(fù)合事件進ー步包括瀏覽器自身沒有的或不完善的事件的改進事件。
7.根據(jù)權(quán)利要求I所述的集中控制WEB頁面事件與狀態(tài)的裝置，其特征在于，所述復(fù)合事件進ー步包括在事件源控件的相關(guān)控件上觸發(fā)的ー組事件。
8.根據(jù)權(quán)利要求I所述的集中控制WEB頁面事件與狀態(tài)的裝置，其特征在于，所述的狀態(tài)管理単元還用于接收并響應(yīng)所述控件模塊的請求，在所述請求成功時根據(jù)所述請求改變所述狀態(tài)存儲器中的所述狀態(tài)變量的記錄。
9.ー種集中控制WEB頁面事件與狀態(tài)的方法，其特征在于，所述方法包括步驟 a.獲取瀏覽器事件，所述瀏覽器事件是從瀏覽器文檔對象捕獲的事件或控件模塊請求提交的事件； b.從狀態(tài)存儲器讀取狀態(tài)變量，井根據(jù)所述狀態(tài)變量和所述瀏覽器事件，生成復(fù)合事件； c.將所述瀏覽器事件或所述復(fù)合事件分發(fā)給對應(yīng)的控件進行處理； d.更新所述狀態(tài)存儲器中所述狀態(tài)變量的記錄。
10.根據(jù)權(quán)利要求9所述的集中控制WEB頁面事件與狀態(tài)的方法，其特征在于，所述狀態(tài)變量進ー步包括事件的狀態(tài)變量、控件的狀態(tài)變量、鼠標(biāo)的狀態(tài)變量及鍵盤的狀態(tài)變量。
11.根據(jù)權(quán)利要求10所述的集中控制WEB頁面事件與狀態(tài)的方法，其特征在于，所述事件的狀態(tài)變量進ー步包括用于記錄之前一個或多個時刻發(fā)生的對下ー個時刻的所述復(fù)合事件的生成產(chǎn)生影響的所述瀏覽器事件或所述復(fù)合事件的變量。
12.根據(jù)權(quán)利要求10所述的集中控制WEB頁面事件與狀態(tài)的方法，其特征在于，所述控件的狀態(tài)變量進ー步包括用于記錄當(dāng)前被激活的控件、當(dāng)前被按壓的控件、當(dāng)前被拖拽的控件、當(dāng)前被縮放的控件及當(dāng)前處于選擇框范圍內(nèi)的控件的變量。
13.根據(jù)權(quán)利要求10所述的集中控制WEB頁面事件與狀態(tài)的方法，其特征在于，所述鼠標(biāo)的狀態(tài)變量進ー步包括用于記錄當(dāng)前鼠標(biāo)點擊是否被屏蔽及當(dāng)前鼠標(biāo)所處的坐標(biāo)的變量。
14.根據(jù)權(quán)利要求9所述的集中控制WEB頁面事件與狀態(tài)的方法，其特征在于，所述復(fù)合事件進ー步包括瀏覽器自身沒有的或不完善的事件的改進事件。
15.根據(jù)權(quán)利要求9所述的集中控制WEB頁面事件與狀態(tài)的方法，其特征在于，所述復(fù)合事件進ー步包括在事件源控件的相關(guān)控件上觸發(fā)的ー組事件。
16.根據(jù)權(quán)利要求9所述的集中控制WEB頁面事件與狀態(tài)的方法，其特征在于，所述方法還包括接收并響應(yīng)所述控件模塊的請求,在所述請求成功時根據(jù)所述請求改變所述狀態(tài)存儲器中的所述狀態(tài)變量的記錄。
全文摘要
本發(fā)明提供了一種集中控制WEB頁面事件與狀態(tài)的裝置和方法。其中集中控制WEB頁面事件與狀態(tài)的裝置包括事件監(jiān)聽單元，用于獲取瀏覽器事件，所述瀏覽器事件是從瀏覽器文檔對象捕獲的事件或控件模塊請求提交的事件；復(fù)合事件生成單元，用于從狀態(tài)存儲器讀取狀態(tài)變量，并根據(jù)所述狀態(tài)變量和所述瀏覽器事件，生成復(fù)合事件；事件分發(fā)單元，用于將所述瀏覽器事件或所述復(fù)合事件分發(fā)給對應(yīng)的控件進行處理；狀態(tài)管理單元，用于更新所述狀態(tài)存儲器中所述狀態(tài)變量的記錄。依據(jù)本發(fā)明，可以實現(xiàn)從框架層面上對事件的集中管理，從而擺脫了以單個控件為單位進行事件管理的機制，避免開發(fā)人員針對每個控件都必須定義一套事件處理流程，很好地減輕了開發(fā)人員的工作難度，同時也減少了整個系統(tǒng)的代碼量，能夠提高系統(tǒng)的運行效率。
文檔編號G06F9/44GK102654831SQ20111005215
公開日2012年9月5日 申請日期2011年3月4日 優(yōu)先權(quán)日2011年3月4日
發(fā)明者歐陽先偉 申請人:百度在線網(wǎng)絡(luò)技術(shù)(北京)有限公司