DHTML對象模型(About the DHTML Object Model)(二)
發表時間:2024-01-24 來源:明輝站整理相關軟件相關文章人氣:
[摘要]事件:冒泡、禁止與處理 單擊一個按鈕,移動鼠標指針到網頁的一部分,在頁面上選中一些文本——這些動作都會激發事件。一個DHML的網頁制作者可以編寫代碼以便在響應這些事件的時候運行,這段特定的代碼通常稱為事件句柄,因為它確實在處理事件。 事件處理不僅限于IE4.0和IE3.0, Netscape Na...
事件:冒泡、禁止與處理
單擊一個按鈕,移動鼠標指針到網頁的一部分,在頁面上選中一些文本——這些動作都會激發事件。一個DHML的網頁制作者可以編寫代碼以便在響應這些事件的時候運行,這段特定的代碼通常稱為事件句柄,因為它確實在處理事件。
事件處理不僅限于IE4.0和IE3.0, Netscape Navigator 3.x 和Communicator都支持事件處理。然而,在IE4.0中,無論是作為事件源的web頁面Html元素,還是這些事件源引發的事件的種類,都已經被大大地擴展。以前,只有很少的一些HTML元素,好像錨點、圖片熱點、表單元素、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 )
<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>
在這個頁面中當用戶在文本區域上移動鼠標指針時,將會彈出一個寫有“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 )
<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 現在事件可以從span標記中被激發,而以前,網頁制作者可能就必須先把每一個span的內容都包裝在一個錨點標記(anchor)中,才能獲得相應的事件。
l 使用事件冒泡,事件可以在文檔對象(document object)這個層次上被捕獲。你不必為參與這個效果每個每個元素都注冊一個獨立的事件處理句柄。例如,假如網頁制作者向頁面添加HTML代碼,這些附加的元素將會自動參與這個事件模型而不需改動哪怕一行的腳本代碼。注意一點,文檔對象(document object)是在這個文檔里面的所有元素的“超級父類”(super parent)元素。