明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

DHTML對象模型（About the DHTML Object Model）(二)

發(fā)表時間：2024-01-24 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]事件：冒泡、禁止與處理 單擊一個按鈕，移動鼠標指針到網(wǎng)頁的一部分，在頁面上選中一些文本——這些動作都會激發(fā)事件。一個DHML的網(wǎng)頁制作者可以編寫代碼以便在響應這些事件的時候運行，這段特定的代碼通常稱為事件句柄，因為它確實在處理事件。 事件處理不僅限于IE4.0和IE3.0, Netscape Na...

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

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

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

鼠標事件
激發(fā)事件的用戶行為:

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
在元素的內(nèi)部移動鼠標指針。

onclick
在元素上單擊鼠標左鍵。

ondblclick
在元素上雙擊鼠標左鍵。

鍵盤事件
激發(fā)事件的用戶行為:

onkeypress
按下并釋放一個鍵(整個按下—彈起的過程).注意，若一個建被持續(xù)按下，多個onkeypress 事件將會被連續(xù)激發(fā)。

onkeydown
按下按鍵，該事件只會被激發(fā)一次，即使該鍵被持續(xù)按下。

onkeyup
釋放按鍵


為了幫助網(wǎng)頁制作者更緊湊、更簡單和更容易維護地創(chuàng)建代碼，IE4.o將事件冒泡作為處理事件的新方法。Microsoft Windows®, OS/2, OSF Motif, 和幾乎所有其它的圖形用戶界面平臺都是使用這種技術(shù)在它們的用戶界面中處理事件的。但是對于HTML來說，事件冒泡卻是一種新的方法，它提供了一個在Web文檔上合成事件句柄的有效模型。

在以前，若一個HTML元素被激發(fā)了一個事件，但在這個元素上，相應的事件句柄并沒有被注冊，這個事件就會消失，不再被感覺到存在了。事件冒泡機制則把這個未處理的事件進一步向上傳遞給元素的父級元素。于是，這個事件繼續(xù)在元素的層次結(jié)構(gòu)中向上冒（像氣泡向上冒一樣），直到它被處理，或者到達了對象模型的頂層，document對象。



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

l 允許多個元素上的共同動作被統(tǒng)一處理。

l 減少Web頁面上代碼的數(shù)量。

l 減少更新文檔時，要更改的代碼的數(shù)量。



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

(例子的超級鏈接;

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

<HTML>
<BODY>
<DIV id=OuterDiv style="background-color: red" onmouseover="alert(window.event.srcElement.id);">
This is some text
<IMG id=InnerImg>
</DIV>
</BODY>
</HTML>
在這個頁面中當用戶在文本區(qū)域上移動鼠標指針時，將會彈出一個寫有“OuterDiv”字樣的對話框，若用戶在圖片上移動鼠標指針時，帶有“InnerImg”字樣的對話框?qū)䦶棾觥?

請注意，img對象的onmouseover事件是在該事件句柄沒有在對象上注冊的情況下被處理。為什么可以這樣呢？因為onmouseover事件向上冒泡到了它的父級元素，div對象。由于在div對象上為onmouseover事件注冊了事件句柄，它引發(fā)了事件處理并產(chǎn)生了上面所提到的對話框。

每次一個事件被激發(fā)，window對象的一個特殊的屬性就會被創(chuàng)建。這個特殊的屬性包括了事件對象(event對象)。這個事件對象包含了剛被激發(fā)的事件的上下文信息，例如鼠標位置、鍵盤狀態(tài)以及最重要的這個事件的源元素。

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

在上面的例子里，對話框顯示的就是激發(fā)這個事件的源元素的id屬性。



處理鼠標效果：
網(wǎng)頁制作者可以通過制作鼠標效果來令頁面的一部分在用戶把鼠標指針移動到上面時作出交互反應。在IE4.0中創(chuàng)造鼠標效果的處理過程是十分簡單的。

(例子的超級鏈接：

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

<HTML>
<HEAD>
<STYLE>
.Item {
cursor: hand;
font-family: verdana;
font-size: 20;
font-style: normal;
background-color: blue;
color: white
}
.Highlight {
cursor: hand;
font-family: verdana;
font-size: 20;
font-style: italic;
background-color: white;
color: blue
}
</STYLE>
</HEAD>
<BODY>
<SPAN class=Item>Milk</SPAN>
<SPAN class=Item>Cookies</SPAN>
<SPAN class=Item>Eggs</SPAN>
<SPAN class=Item>Ham</SPAN>
<SPAN class=Item>Cheese</SPAN>
<SPAN class=Item>Pasta</SPAN>
<SPAN class=Item>Chicken</SPAN>

<SCRIPT>
function rollon() {
if (window.event.srcElement.className == "Item") {
window.event.srcElement.className = "Highlight";
}
}

document.onmouseover = rollon;

function rolloff() {
if (window.event.srcElement.className == "Highlight") {
window.event.srcElement.className = "Item";
}
}

document.onmouseout = rolloff;
</SCRIPT>
</BODY>
</HTML>
在上面的例子中，7個span對象被使用item 樣式類設置成了斜體。當鼠標指針在這7個元素中的任一個個上懸浮移動時，它的樣式將會被改變成Highlight樣式類指定的那樣。

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

l 現(xiàn)在事件可以從span標記中被激發(fā)，而以前，網(wǎng)頁制作者可能就必須先把每一個span的內(nèi)容都包裝在一個錨點標記(anchor)中，才能獲得相應的事件。

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