DHTML物件模型 (二)

事件：冒泡、禁止與處理
單擊一個按鈕，移動滑鼠指標到網頁的一部分，在頁面上選中一些文本——這些動作都會激發事件。一個DHML的網頁製作者可以編寫代碼以便在響應這些事件的時候運行，這段特定的代碼通常稱為事件控制代碼，因為它確實在處理事件。

事件處理不僅限於IE4.0和IE3.0,?Netscape?Navigator?3.x?和Communicator都支援事件處理。然而，在IE4.0中，無論是作為事件來源的web頁面Html元素，還是這些事件來源引發的事件的種類，都已經被大大地擴充。以前，只有很少的一些HTＭＬ元素，好像錨點、圖片熱點、表單元素、application對象和object對象等，可以引發事件。在IE4.0事件模型中，頁面上的每一個HTML元素都可以引發所有的滑鼠和鍵盤事件。

下面的列表中列出了在IE4.0(及其後的更高版本—譯者注)中，任一HTML元素都可激發的常用事件：

滑鼠事件
?激發事件的使用者行為:
?
onmouseover
?Moves?the?mouse?pointer?over?(that?is,?enters)?an?element.
?
onmouseout
?Moves?the?mouse?pointer?off?(that?is,?exits)?an?element.
?
onmousedown
?按下滑鼠的任一件。
?
onmouseup
?釋放滑鼠的任一鍵。
?
onmousemove
?在元素的內部移動滑鼠指標。
?
onclick
?在元素上單擊滑鼠左鍵。
?
ondblclick
?在元素上雙擊滑鼠左鍵。
?
鍵盤事件
?激發事件的使用者行為:
?
onkeypress
?按下並釋放一個鍵(整個按下—彈起的過程).注意，若一個建被持續按下，多個onkeypress?事件將會被連續激發。
?
onkeydown
?按下按鍵，該事件只會被激發一次，即使該鍵被持續按下。
?
onkeyup
?釋放按鍵
?

為了協助網頁製作者更緊湊、更簡單和更容易維護地建立代碼，IE4.o將事件冒泡作為處理事件的新方法。Microsoft?Windows?,?OS/2,?OSF?Motif,?和幾乎所有其它的圖形化使用者介面平台都是使用這種技術在它們的使用者介面中處理事件的。但是對於HTML來說，事件冒泡卻是一種新的方法，它提供了一個在Web文檔上合成事件控制代碼的有效模型。

在以前，若一個HTML元素被激發了一個事件，但在這個元素上，相應的事件控制代碼並沒有被註冊，這個事件就會消失，不再被感覺到存在了。事件冒泡機制則把這個未處理的事件進一步向上傳遞給元素的父級元素。於是，這個事件繼續在元素的階層中向上冒（像氣泡向上冒一樣），直到它被處理，或者到達了物件模型的頂層，document對象。

?

事件冒泡的有效性在於以下幾點：

l???????????允許多個元素上的共同動作被統一處理。

l???????????減少Web頁面上代碼的數量。

l???????????減少更新文檔時，要更改的代碼的數量。

?

下面是一個事件冒泡的簡單例子：

(例子的超級連結;

http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_01.htm?)

This?is?some?text

在這個頁面中當使用者在文本地區上移動滑鼠指標時，將會彈出一個寫有“OuterDiv”字樣的對話方塊，若使用者在圖片上移動滑鼠指標時，帶有“InnerImg”字樣的對話方塊將會彈出。

請注意，img對象的onmouseover事件是在該事件控制代碼沒有在對象上註冊的情況下被處理。為什麼可以這樣呢？因為onmouseover事件向上冒泡到了它的父級元素，div對象。由於在div對象上為onmouseover事件註冊了事件控制代碼，它引發了事件處理併產生了上面所提到的對話方塊。

每次一個事件被激發，window對象的一個特殊的屬性就會被建立。這個特殊的屬性包括了事件對象(event對象)。這個事件對象包含了剛被激發的事件的上下文資訊，例如滑鼠位置、鍵盤狀態以及最重要的這個事件的源元素。

???????源元素就是出發這個事件的元素，可以通過window.event對象的srcElement屬性訪問到它。

在上面的例子裡，對話方塊顯示的就是激發這個事件的源元素的id屬性。

?

處理滑鼠效果：
網頁製作者可以通過製作滑鼠效果來令頁面的一部分在使用者把滑鼠指標移動到上面時作出互動反應。在IE4.0中創造滑鼠效果的處理過程是十分簡單的。

(例子的超級連結：

http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_02.htm?)

Milk
Cookies
Eggs
Ham
Cheese
Pasta
Chicken
?

在上面的例子中，7個span對象被使用item?樣式類設定成了斜體。當滑鼠指標在這7個元素中的任一個個上懸浮移動時，它的樣式將會被改變成Highlight樣式類指定的那樣。

Internet?Explorer?4.0中的新功能帶來了以下好處：

l?????????現在事件可以從span標記中被激發，而以前，網頁製作者可能就必須先把每一個span的內容都封裝在一個錨點標記(anchor)中，才能獲得相應的事件。

l?????????使用事件冒泡，事件可以在文檔對象（document?object）這個層次上被捕獲。你不必為參與這個效果每個每個元素都註冊一個獨立的事件處理控制代碼。例如，假如網頁製作者向頁面添加HTML代碼，這些附加的元素將會自動參與這個事件模型而不需改動哪怕一行的指令碼代碼。注意一點，文檔對象（document?object）是在這個文檔裡面的所有元素的“超級父類”（super?parent）元素。