DHTML中的事件處理- IE和Netscape分析比較 – 轉 “java與模式”，文章不錯

http://www.yesky.com/20020415/1606944_6.shtml

DHTML中的事件處理

瀏覽器的DOM（Document Object Model)模型中的事件處理均採用責任鏈模式。本節首先考察Netscape瀏覽器的DHTML的事件處理，然後再研究Internet Explorer的事件模型。

　　Netscape的事件模型

　　Netscape的事件處理機制叫做“事件捕捉”（Event Capturing）。在事件捕捉機制裡面，一個事件是從DOM的最高一層向下傳播，也就是說，window對象是第一個接到事件的，然後是document對象，如此往下---事件的產生對象反而是最後一個接到事件的。

　　如果要是一個對象捕獲某一個事件，只需要調用captureEvent()方法；如果要使一個對象把某一個事件向下傳而不處理此事件，只需要對此對象使用releaseEvents方法即可。下面考察一個簡單的事件捕獲和傳遞的例子。

圖12、一個Netscape的例子。

　　在這個例子裡，有一個textbox和兩個button，一個叫做“Capture Event”，單擊後會使網頁的click事件被捕捉，文字框中的計數會加一；另一個叫做“Release Event”，單擊後會使網頁的click事件不被捕捉。

　　使click事件被捕捉需要調用captureEvent()方法，而使click事件不被捕捉需要調用releaseEvent()方法。下面是具體的html和JavaScript代碼。

 

代碼清單6、JavaScript和HTML原始碼。

　　顯然，一個事件可以在幾個不同的等級上得到處理，這是一個不純的責任鏈模式。

　　Internet Explorer的事件模型

　　Internet Explorer處理事件的方式與Netscape既相似又不同。當一個事件發生在Internet Explorer所瀏覽的網頁中時，Internet Explorer會使用DHTML的“Event Bubbling”即事件浮升機制處理此事件。Internet Explorer的DOM模型是html對象等級結構和事件處理機制。在DOM裡面，每一個html標示都是一個DOM對象，而每一個DOM對象都可以產生事先定義好的幾個事件中的一個（或幾個）。這樣的一個事件會首先發生在事件所屬的對象上，然後向上傳播，傳到此對象所屬的容器物件上，如此等等。因此，事件浮升機制恰恰是事件捕捉機制的相反面。

　　 在Event Bubbling機制裡面，產生事件的對象首先會收到事件。然後，事件會依照對象的等級結構向上傳播。比如一個DIV裡有一個Form，Form裡面又有一個Button，那麼當Button的onclick事件產生時，Form的onclick事件代碼就會被執行。然後，事件就會傳到DIV對象。如果DIV對象的onclick事件有任何代碼的話，這代碼就會被執行，然後事件繼續沿著DOM結構上行。

　　如果要阻止事件繼續向上傳播，可以在事件鏈的任何一個節點上把cancelBubble性質設定成True即可。

　　Internet Explorer 瀏覽器幾乎為所有的 HTML 標識符都提供了事件控制代碼，因此Internet Explorer不需要captureEvents()方法和releaseEvents()方法來捕獲和釋放事件。下面的JavaScript語句指定了document對象的onclick事件的處理方法：

document.onclick = functionName; 

　　而下面的語句則停止了document對象對onclick事件的處理。

document.onclick = null; 

　　因為事件處理性質被賦值null，document便沒有任何的方法處理此事件。換言之，null值禁止了此對象的事件處理。這種方法可以用到任何的對象和任何的事件上面。當然這一做法不適用於Netscape。

　　與Netscape中一樣，一個事件處理方法可以返還Boolean值。比如，單擊一個超連結標記符是否造成瀏覽器跟進，取決於此超連結標記符的onclick事件是否返還true。

　　為了顯示Internet Explorer中的事件浮升機制，本節特準備了下面的例子。一個Form裡面有一個Button，請見：

圖13、一個Internet Explorer的例子。

　　其HTML代碼請見下面：

 

 

代碼清單7、JavaScript和HTML原始碼。

　　當myButton的onclick事件發生時，myButton的事件處理首先被激發，從而顯示出如下的對話窗：

圖14、myButton對象的事件處理被激發。

　　然後事件會象氣泡一樣浮升到上一級的對象，即myForm對象上。myForm對象的事件處理給出下面的對話窗：

圖15、myFormn對象的事件處理被激發。

　　這以後事件繼續浮升到更上一級的對象，即body上。這時，document對象的事件處理被激發，並給出下面的對象窗：

圖16、document對象的事件處理被激發。

　　這就是事件浮升（Event Bubbling）機制。

　　顯然，這三級對象組成一個責任鏈，而事件便是命令或請求。當事件沿著責任鏈傳播時，責任鏈上的對象可以選擇處理或不處理此事件；不論事件在某一個等級上是否得到處理，事件都可以停止上浮或繼續上浮。這是不純的責任鏈模式。