在微軟IE 5.0版本的瀏覽器發(fā)布以前，網(wǎng)頁編程中面對的最大挑戰(zhàn)就是不能輕易地創(chuàng)建組件，以達(dá)到代碼重用和多頁面共享的目的。這個問題一直困擾著DHTML（動態(tài) HEML）的網(wǎng)頁編程者。他們只能不斷地重復(fù)書寫HTML、CSS和javascript的代碼，以滿足多個頁面上的重復(fù)或相似的功能。自IE 5.0瀏覽器發(fā)布后，這種情況得到了改善，它帶給我們一個新的指令組合方法，可把實現(xiàn)特定功能的代碼封裝在一個組件內(nèi)，從而實現(xiàn)多頁面的代碼重用，使網(wǎng)頁編程進(jìn)入一個全新的天地。這個新的技術(shù)就是我們要談到的DHTML中的“行為”（Behaviors）。 
　　“行為”作為一個簡單易用的組件，它封裝了頁面上特定的功能或動作。當(dāng)把一個“行為”附到WEB頁面中的一個元件上時，這個元件的原有行為就會有所改變。因此，網(wǎng)頁編程者可以開發(fā)通用的DHTML指令，并改變原有對象的一些屬性，用“行為”來增強一個對象的功能，同時也簡化了頁面的HTML代碼。而且“行為”的創(chuàng)建和使用也非常簡單方便，所需的知識也只是原來已經(jīng)習(xí)慣使用的CSS樣式表、HTML指令和javascript腳本語言。只要你對此有所了解，有過實際編程的經(jīng)歷，學(xué)習(xí)并掌握“行為”的使用完全沒有問題。我們將以一個改變字體效果的“行為”組件為例來說明如何編寫和使用一個“行為”，并體驗“行為”給頁面編輯帶來的優(yōu)點和方便之處。 

　　首先新建一個名為font_efftce.htc的文本文件，組成“行為”組件的文件都是以.htc為擴(kuò)展名，這個文件中的內(nèi)容就是我們對這個“行為”的描述。它的創(chuàng)建和使用步驟如下： 
（1）首先給這個“行為”增加幾個事件響應(yīng)，語句書寫格式如下： 
< 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”對應(yīng)所需事件名，在這里分別為：onmouseover,onmouseout,onmousedown,onmouseup四個事件名，你當(dāng)然可以再增加其它的事件名來滿足你的特定需求?！癘NEVENT”對應(yīng)著個自的事件句柄，即事件觸發(fā)時所調(diào)用的函數(shù)名稱。glowit()函數(shù)使字體周圍產(chǎn)生一個紅色的輝光。noglow()函數(shù)是消除字體的輝光效果。Font2yellow()函數(shù)是把字體顏色改為黃色。Font2blue()函數(shù)是把字體顏色改為藍(lán)色。四個事件的定義都是相似的。 
（2）接下來，再給這個“行為”增加二個“方法”定義，內(nèi)容如下。 
< PUBLIC:METHOD NAME="move_down" / > 
< PUBLIC:METHOD NAME="move_right" / > 
　　“NAME”參數(shù)對應(yīng)的是給定的“方法”名稱。move_down和move_right分別是向下和向右移動的“方法”對應(yīng)的函數(shù)名稱。注意，在方法名的后面不要帶“( )”括號，即不要寫成“move_down()”這個樣子，這在“方法”定義的語法上是不允許的。 

（3）接下來的工作就是在我們熟悉的DHTML環(huán)境下，用javascript腳本語句編寫“事件句柄”和“方法”所對應(yīng)的函數(shù)內(nèi)容，實現(xiàn)預(yù)期的效果。具體內(nèi)容參考下面的源程序。其中的“element”參數(shù)指的是這個“行為”所附著的對象，因為“行為”總是被附著到頁面的元件上面，并通過這個元件發(fā)揮作用。其它語句都是DHTML的編程內(nèi)容，就不再多說了。如有不明之處，可參考微軟的MSDN開發(fā)文檔中有關(guān)IE瀏覽器的內(nèi)容，上面有詳細(xì)的DHTML編程參考內(nèi)容、屬性和方法使用說明等，并包含了大量的文章和舉例程序。經(jīng)常訪問微軟的MSDN文檔，尤其對于初學(xué)者來說是一個良好的學(xué)習(xí)習(xí)慣，你幾乎可以得到任何你想找的答案，它的網(wǎng)址為：http://msdn.microsoft.com/ie/。 
　　完整的“行為”文檔“font_effect.htc”的內(nèi)容如下： 
////////////////////////////“行為”文檔開始/////////////////////////////////// 
//給“行為”增加四個鼠標(biāo)事件 
< 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; 
} 
//定義鼠標(biāo)onmouseup事件的調(diào)用函數(shù) 
function font2blue(){ 
if (event.srcElement == element) 
{ 
element.style.color='blue'; 
} 
} 
//定義鼠標(biāo)onmousedown事件的調(diào)用函數(shù) 
function font2yellow(){ 
if (event.srcElement == element) 
{ 
element.style.color='yellow'; 
} 
} 

//定義鼠標(biāo)onmouseover事件的調(diào)用函數(shù) 
function glowit() 
{ 
if (event.srcElement == element) 
{ 
font_color=style.color; 
element.style.color='white'; 
element.style.filter="glow(color=red,strength=2)"; 
} 
} 

//定義鼠標(biāo)onmouseout事件的調(diào)用函數(shù) 
function noglow() 
{ 
if (event.srcElement == element) 
{ 
element.style.filter=""; 
element.style.color=font_color; 
} 
} 
< /SCRIPT > 
//////////////////“行為”文檔結(jié)束/////////////////////////////// 

（4）如何在一個頁面上使用“行為” 
　　在頁面上使用“行為”組件，并不需要學(xué)習(xí)新的知識。所需的知識的也不過是CSS樣式表和HTML的設(shè)置而已，請看下面的語句。 
< STYLE > 
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;} 
< /STYLE > 
　　可以看出，這和以前我們已經(jīng)熟知的樣式表設(shè)置完全相同。上面的語句定義了一個樣式名：“myfilter”，其中對我們來說比較新的內(nèi)容是：“behavior:url(font_effect.htc);”，“behavior”是新增的“行為”屬性名，這就是“行為”在樣式表中的設(shè)置方式。括號中的內(nèi)容是“行為”文檔的文件名，本例中表明“行為”文檔在與頁面文件在同一個目錄下，如果“行為”文檔安置在其它目錄下，在此參數(shù)的前面要加上相應(yīng)的路徑名，以保證可以正確地定位“行為”文檔的位置。此“樣式”中的其它內(nèi)容就是普通的樣式屬性設(shè)置，可根據(jù)你的需要增減，但在此例中，由于使用了“glow”濾鏡效果，至少要設(shè)置一個寬度（width）屬性。通過以上的樣式指定，我們就有了一個名為：“myfilter”的樣式，它附帶一個有字體變化效果的“行為”。如果你想要在一個頁面元件上使用這個附帶“行為”的樣式，同樣也很簡單，只要把這個“樣式名”安置在元件的屬性設(shè)置區(qū)域即可，見下面的語句。 
< span id="myspan" class='myfilter' >行為產(chǎn)生的文字效果< /span >< br > 
< span class='myfilter' >鼠標(biāo)指向后產(chǎn)生輝光< /span > 
　　以上語句里面沒有什么新的內(nèi)容，class='myfilter'就是我們所熟悉的樣式設(shè)置。在第一個“span”標(biāo)記的屬性中還定義了一個“id”標(biāo)記，稍后就會看到，這是用來演示調(diào)用“行為”內(nèi)的“方法”而設(shè)置的。這樣設(shè)置后，“span”元件中的內(nèi)容就可以顯示出“行為”組件內(nèi)的預(yù)定效果： 
1． 鼠標(biāo)指針移動到文字內(nèi)容上時，在文字周圍產(chǎn)生紅色的輝光效果，同時文字變成白色。 
2． 當(dāng)鼠標(biāo)按鈕按下時，文字顏色改變?yōu)辄S色。 
3． 鼠標(biāo)按鈕抬起后，文字顏色又改變?yōu)樗{(lán)色。 
4． 當(dāng)鼠標(biāo)指針移動到文字區(qū)域以外時，去掉了紅色輝光效果，文字恢復(fù)原樣。 
　　另外，我們在定義“行為”時設(shè)置了二個“方法”，“move_down”和“move_right”。為調(diào)用這二個“方法”，定義了二個按鈕： 
< button onclick="myspan.move_right();" >向右移動第一行文字< /button >< br > 
< button onclick="myspan.move_down();" >向下移動第一行文字< /button > 
　　用按鈕的onclick事件去調(diào)用這二個“方法”，先前定義的“id”標(biāo)記就作為元件的對象名稱，用“myspan.move_down”來調(diào)用“方法”，操縱這個對象。可以看到，在按下相應(yīng)的按鈕后，會使第一行的文字產(chǎn)生向下或向右的移動。雖然只是用第一行文字做了示范，實際上，只要做相應(yīng)的設(shè)置，你也可以移動其它對象。頁面源文檔的完整內(nèi)內(nèi)容如下： 
< 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' >行為產(chǎn)生的文字效果< /span >< br > 
< span class='myfilter' >鼠標(biāo)指向后產(chǎn)生輝光< /span >< br > 
< span class='myfilter' >同時文字變白< /span >< br > 
< span class='myfilter' >按下鼠標(biāo)后文字變黃< /span >< br > 
< span class='myfilter' >抬起鼠標(biāo)后文字變藍(lán)< /span >< br > 
< span class='myfilter' >鼠標(biāo)離開后文字恢復(fù)原狀< /span >< br > 
< button onclick="myspan.move_right();" >向右移動第一行文字< /button >< br > 
< button onclick="myspan.move_down();" >向下移動第一行文字< /button > 
< /BODY > 
< /html > 
　　通過以上的簡單介紹，可以看出，我們很容易地在一個“行為”中同時組合了多種文字變化效果，通過簡單的“樣式”設(shè)置，任意地將它與頁面元件相關(guān)連，體現(xiàn)了“行為”組件的優(yōu)點和強大功能。一個“行為”組件，不僅能在一個頁面內(nèi)重復(fù)使用，也可供同一站點上的所有頁面使用。試想一下，如果不使用“行為”來完成上述的效果，雖然可以在頁面內(nèi)調(diào)用一組預(yù)定的函數(shù)來完成同樣的功能，但頁面內(nèi)每一個使用文字效果的元件都要附加四個鼠標(biāo)事件，如果在多個頁面內(nèi)使用相同的效果，被調(diào)用的函數(shù)也需要在每一個頁面內(nèi)重復(fù)設(shè)置。相比之下，孰優(yōu)孰劣是很明顯的。所以，使用“行為”組件，可以制作出簡潔、高效、通用和便于維護(hù)的頁面。本文的舉例只是為了說明“行為”組件的編寫和使用過程，使讀者對“行為”編程有一個概括的了解，并以此基礎(chǔ)制作出自己所需要的“行為”組件，或直接引用滿足個人需要的現(xiàn)成“行為”組件，因為“組件共享”的概念也是“行為”開發(fā)者的初衷。最后，愿本文能起到“拋磚引玉”的目的，使讀者步入精彩的DHTML網(wǎng)頁編程天地。 

說明: 
HTC是HTML component的縮寫, 
是IE5.0的主要擴(kuò)展之一, 
除了具備一般組件的可重用優(yōu)點之外, 
還具有易于開發(fā)使用等優(yōu)點, 
因為需要引入外部文件,這里就不舉例了,寶庫里有例子. 

控件和組件 
HTC提供了一個簡單機(jī)制以在腳本中實現(xiàn)DHTML行為。一個HTC文件和HTML文件沒有任何差別，并且以“.htc”為后綴， 

可以使用HTC實現(xiàn)以下行為： 
設(shè)定屬性和方法。通過“PROPERTY”和“METHOD”元素定義 
設(shè)置自定義事件。通過“EVENT”元素實現(xiàn)，用該元素的“fire()”方法釋放事件， 
通過“createEventObject()”方法設(shè)置事件環(huán)境。 
訪問所包含該HTC的的HTML頁的DHTML對象模型，使用HTC的“element"對象，返回 
一個附加行為的元素，使用該對象，HTC可以訪問包含文擋及它的對象模型（屬性、方法、事件）。 
收取通知，使用”ATTACH“元素實現(xiàn)，瀏覽器不但通知HTC標(biāo)準(zhǔn)的DHTML事件，而且通知HTC兩種特殊事件：oncontentready事件和ondocumentready事件 。 


定義標(biāo)記和命名空間 
HTC的基礎(chǔ)是自定義標(biāo)記 
要為頁面定義自定義標(biāo)記，必須為該標(biāo)記提供命名空間 
要使用該標(biāo)記必須在該標(biāo)記前加上正確的XML命名空間前綴 
例如: 

定義一個新標(biāo)記RIGHT的例子 
代碼片斷如下：<HTML XMLNS:DOCJS> 
<HEAD> 
<STYLE> 
@media all { 
DOCJS\:RIGHT {text-align:right; width:100} 
} 
</STYLE> 
</HEAD> 
<BODY> 
<DOCJS:RIGHT> 
Read Doc JavaScript's columns, tips, tools, and tutorials 
</DOCJS:RIGHT> 
</BODY> 
</HTML> 


可以在單個HTML標(biāo)記 
中定義多個命名空間： 
<HTML XMLNS:DOCJS XMLNS:DOCjavascript> 

組件定義 
組件的名字是由HTC文檔里定義在第一行的XML命名空間決定的 
該頁不用調(diào)用其他的HTC話,就只有一個命名空間定義 
實際上，HTML組件的定義就是自定義標(biāo)簽行為的定義 
該行為包括一個屬性和一個事件： 

<HTML xmlns:MyTag> 
<HEAD> 
<PUBLIC:COMPONENT tagName="MyTag"> 
<PROPERTY NAME="value"></PROPERTY> 
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"<>/ATTACH> 
</PUBLIC:COMPONENT> 
<STYLE>//為組件定義樣式表 
.cssMyTag{ 
} 
</STYLE> 
<SCRIPT language=javascript> 
function MyTagBehavior1(){} //為組件定義方法 
</SCRIPT> 
</HEAD> 
<BODY onclick=MyTagBehavior1> //為組件定義響應(yīng)事件 
</BODY> 
</HTML> 


其中的oncontentready是在組件被調(diào)用者完全導(dǎo)入時觸發(fā) 
再看看fnInit() 

function fnInit() { 
document.body.innerHTML = element.value;//設(shè)定組件顯示內(nèi)容 
document.body.className = "clsMyTag"; //設(shè)定顯示樣式表, 
defaults.viewLink = document; //使本組件對其他文檔可見 
element.aProperty = element.value; //設(shè)置組件的屬性值 
} 


組件的調(diào)用 

<HTML xmlns:MyCom> 
<HEAD> 
<?IMPORT NAMESPACE="MyCom" IMPLEMENTATION="MyTag.htc"/> 
</HEAD> 
<BODY> 
<MyCom:MyTag></MyCom:MyTag> 
</BODY> 
</HTML>