在微軟IE 5.0版本的瀏覽器發布以前，網頁程式設計中面臨的最大挑戰就是不能輕易地建立元件，以達到程式碼重複使用和多頁面共享的目的。這個問題一直困擾著DHTML（動態HEML）的網頁程式設計師。他們只能不斷重複書寫HTML、CSS和JAVASCRIPT的程式碼，以滿足多個頁面上的重複或相似的功能。自IE 5.0瀏覽器發布後，這種情況得到了改善，它帶給我們一個新的指令組合方法，可把實現特定功能的程式碼封裝在一個元件內，從而實現多頁面的程式碼重用，使網頁編程進入一個全新的天地。這個新的技術就是我們要談到的DHTML中的「行為」（Behaviors）。
「行為」作為一個簡單易用的元件，它封裝了頁面上特定的功能或動作。當把一個「行為」附到WEB頁面中的一個元件上時，這個元件的原有行為就會有所改變。因此，網頁程式設計者可以發展出通用的DHTML指令，並改變原有物件的一些屬性，以「行為」來增強一個物件的功能，同時也簡化了頁面的HTML程式碼。而且「行為」的創建和使用也非常簡單方便，所需的知識也只是原來已經習慣使用的CSS樣式表、HTML指令和JAVASCRIPT腳本語言。只要你對此有所了解，有過實際程式設計的經歷，學習並掌握「行為」的使用完全沒有問題。我們將以一個改變字體效果的“行為”元件為例來說明如何編寫和使用一個“行為”，並體驗“行為”為頁面編輯帶來的優點和方便之處。
先新建一個名為font_efftce.htc的文字文件，組成「行為」元件的檔案都是以.htc為副檔名，這個檔案中的內容就是我們對這個「行為」的描述。它的建立與使用步驟如下：
（1）先為這個「行為」增加幾個事件回應，語句書寫格式如下：
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
「EVENT」對應所需事件名，這裡分別為：onmouseover,onmouseout,onmousedown,onmouseup四個事件名，你當然可以再增加其它的事件名來滿足你的特定需求。 「ONEVENT」對應一個自的事件句柄，即事件觸發時所呼叫的函數名稱。 glowit()函數使字體周圍產生一個紅色的輝光。 noglow()函數是消除字體的輝光效果。 Font2yellow()函數是把字型顏色改為黃色。 Font2blue()函數是把字型顏色改為藍色。四個事件的定義都是相似的。
（2）接下來，再給這個「行為」增加二個「方法」定義，內容如下。
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
「NAME」參數對應的是給定的「方法」名稱。 move_down和move_right分別是向下和向右移動的「方法」對應的函數名稱。請注意，在方法名稱的後面不要帶「( )」括號，即不要寫成「move_down()」這個樣子，這在「方法」定義的語法上是不允許的。
（3）接下來的工作就是在我們熟悉的DHTML環境下，用JAVASCRIPT腳本語句寫「事件句柄」和「方法」所對應的函數內容，以實現預期的效果。具體內容參考下面的原始程式。其中的「element」參數指的是這個「行為」所附著的對象，因為「行為」總是被附著到頁面的元件上面，並且透過這個元件發揮作用。其它語句都是DHTML的程式內容，就不再多說了。如有不明之處，可參考微軟的MSDN開發文件中有關IE瀏覽器的內容，上面有詳細的DHTML程式參考內容、屬性和方法使用說明等，並包含了大量的文章和舉例程式。經常訪問微軟的MSDN文檔，尤其對於初學者來說是一個良好的學習習慣，你幾乎可以得到任何你想找的答案，它的網址為： http://msdn.microsoft.com/ie/ 。
完整的「行為」文件「font_effect.htc」的內容如下：
////////////////////////////「行為」文件開始// /////////////////////////////////
//增加四個滑鼠事件
< PUBLIC:ATTACH EVENT= "onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >
< PUBLIC :ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
//為「行為」定義二個方法
< PUBLIC:METHOD
NAME="move_down" / > < PUBLIC:METHOD NAME="move_right" / >
< SCRIPT LANGUAGE="JScript" >
//定義一個儲存字體顏色的變數
var font_color;
//定義向下移動文字的方法
function move_down()
{
element.style.posTop+=2;
}
//定義向右移動文字的方法
function move_right()
{
element.style.posLeft +=6;
}
//定義滑鼠onmouseup事件的呼叫函式
function font2blue(){
if (event.srcElement == element)
{
element.style.color='blue';
}
}
//定義滑鼠onmousedown事件的呼叫函式
function font2yellow(){
if (event.srcElement == element)
{
element.style.color='yellow';
}
}
//定義滑鼠onmouseover事件的呼叫函式
function glowit()
{
if (event.srcElement == element)
{
font_color=style.color;
element.style.color='white';
element.style.filter="glow(color =red,strength=2)";
}
}
//定義滑鼠onmouseout事件的呼叫函式
function noglow()
{
if (event.srcElement == element)
{
element.style.filter="";
element.style.color=font_color;
}
}
< /SCRIPT >
/// ///////////////「行為」文件結束/////////////////////////////// /
（4）如何在一個頁面上使用「行為」
在頁面上使用「行為」元件，並不需要學習新的知識。所需的知識的也不過是CSS樣式表和HTML的設定而已，請看下面的語句。
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
可以看出，這和以前我們已經熟知的樣式表設定完全相同。上面的語句定義了一個樣式名：“myfilter”，其中對我們來說比較新的內容是：“behavior:url(font_effect.htc);”，“behavior”是新增的“行為”屬性名，這就是「行為」在樣式表中的設定方式。括號內的內容是「行為」文件的檔案名，本例中表示「行為」文件在與頁面檔案在同一個目錄下，如果「行為」文件安置在其它目錄下，在此參數的前面要加上對應的路徑名，以確保可以正確定位「行為」文件的位置。此「樣式」中的其它內容就是普通的樣式屬性設置，可根據你的需要增減，但在此例中，由於使用了「glow」濾鏡效果，至少要設置一個寬度（width）屬性。透過以上的樣式指定，我們就有了一個名為：「myfilter」的樣式，它附帶一個有字體變化效果的「行為」。如果你想要在一個頁面元件上使用這個附帶「行為」的樣式，同樣也很簡單，只要把這個「樣式名」安置在元件的屬性設定區域即可，請參閱下面的語句。
< span id="myspan" class='myfilter' >行為產生的文字效果< /span >< br >
< span class='myfilter' >滑鼠指向後產生輝光< /span >
以上語句裡面沒有什麼新的內容，class='myfilter'就是我們熟悉的樣式設定。在第一個「span」標記的屬性中也定義了一個「id」標記，稍後就會看到，這是用來示範呼叫「行為」內的「方法」而設定的。這樣設定後，「span」元件中的內容就可以顯示出「行為」元件內的預定效果：
1． 當滑鼠指標移到文字內容上時，在文字周圍產生紅色的輝光效果，同時文字變成白色。
2． 當滑鼠按鈕按下時，文字顏色會改變為黃色。
3． 滑鼠按鈕抬起後，文字顏色又改為藍色。
4． 當滑鼠指標移動到文字區域以外時，去掉了紅色輝光效果，文字恢復原樣。
另外，我們在定義“行為”時設定了二個“方法”，“move_down”和“move_right”。為呼叫這二個“方法”，定義了二個按鈕：
< button onclick="myspan.move_right();" >向右移動第一行文字< /button >< br >
< button onclick="myspan.move_down ();" >向下移動第一行文字< /button >
用按鈕的onclick事件去調用這二個“方法”，先前定義的“id”標記就作為元件的對象名稱，用“myspan.move_down”來呼叫“方法”，操縱這個物件。可以看到，按下對應的按鈕後，會使第一行的文字產生向下或向右的移動。雖然只是用第一行文字做了示範，實際上，只要做相應的設置，你也可以移動其它物件。頁面來源文件的完整內內容如下：
< html >
< HEAD >
< TITLE >行為效果示範< /TITLE >
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold; width=180;left:0;}
< /STYLE >
< /HEAD >
< BODY >
< span id="myspan" class='myfilter' >行為產生的文字效果< /span >< br >
< span class=' myfilter' >滑鼠指向後產生輝光< /span >< br >
< span class='myfilter' >同時文字變白< /span >< br >
< span class='myfilter' >按滑鼠後文字變黃< /span >< br >
< span class='myfilter' >抬起滑鼠後文字變藍< /span >< br >
< span class='myfilter' >滑鼠離開後文字恢復原狀< /span >< br >
< button onclick="myspan.move_right();" >向右移動第一行文字< /button >< br >
< button onclick="myspan.move_down();" >向下移動第一行文字</button >
< /BODY >
< /html >
透過以上的簡單介紹，可以看出，我們很容易地在一個「行為」中同時組合了多種文字變化效果，透過簡單的「樣式」設置，任意地將它與頁面元件相關連，體現了「行為」元件的優點和強大功能。一個「行為」元件，不僅能在一個頁面內重複使用，也可供同一網站上的所有頁面使用。試想一下，如果不使用「行為」來完成上述的效果，雖然可以在頁面內呼叫一組預定的函數來完成相同的功能，但頁面內每一個使用文字效果的元件都要附加四個滑鼠事件，如果在多個頁面內使用相同的效果，被呼叫的函數也需要在每個頁面內重複設定。相較之下，孰優孰劣是很明顯的。所以，使用「行為」元件，可以製作出簡潔、有效率、通用且方便維護的頁面。本文的舉例只是為了說明「行為」組件的編寫和使用過程，使讀者對「行為」編程有一個概括的了解，並以此基礎製作出自己所需要的「行為」組件，或直接引用滿足個人需要的現成「行為」元件，因為「元件共享」的概念也是「行為」開發者的初衷。最後，願本文能達到「拋磚引玉」的目的，讓讀者步入精彩的DHTML網頁程式天地。