学用DHTML的“行为”组件

网络与通信

Ringfo

样式表给我们带来种种方便和精彩的同时，也存在一点缺憾，那就是其设置的“效果”仅限于针对对象的外观而已，并不能赋予对象一定的“功能”。说起来可能有点抽象，通俗的理解就是，在样式表为网站中同一类对象设置统一外观风格的基础上，再赋予对象统一的“动作”，这是一些真正意义上的动态效果。诸如鼠标放上去时对象逐渐变亮（需要对于脚本驱动的渐变，并非简单变化）、渐隐渐现的模糊效果、波浪以及其他滤镜效果，抑或是鼠标滑过时执行一段预定义的脚本程序等常见的网页动态效果，样式表显然就无能为力了。IE 5.0及以后版本的浏览器提供了一种新的指令组合方法，可把实现特定功能的代码封装在一个组件内，从而实现多页面的代码重用，这个新的技术就是DHTML中的“行为”(Behaviors)组件。
“行为”作为一个简单易用的组件，它封装了页面上特定的功能或动作。当把一个“行为”附到WEB页面中的一个元件上时，这个元件的原有行为就会有所改变。因此，网页编程者可以开发通用的DHTML指令，并通过设置已有对象的一些属性，把“行为”附加到对象上，来增强一个对象的功能，其对页面HTML代码的简化是不言而喻的。这非常类似于样式表，但较之样式表而言其功能又要强大许多。
“行为”的创建和使用非常简单，其实也类似于CSS样式表，只不过在其中会增加了一些HTML指令和JavaScript(或者VBscript)脚本语言的内容。只要你有脚本编程经验，学习并掌握“行为”组件的使用是完全没有问题的。通过以下一个改变字体效果的“行为”组件，我们来看看如何编写和使用一个“行为”，并体验“行为”给页面编辑带来的优点和方便。
新建一个名为demo.htc的文本文件(组成“行为”组件的文件是以.htc为扩展名)，这个文件中的内容就是我们对这个“行为”的描述。每个行为组件都由三个部分组成──事件、方法以及函数实体。这三个部分都不是必须的，但如果三部分都不存在，这就是一个空组件；如果存在了事件和方法，就必须有对应的函数实体与之对应，否则就形成了无效事件或方法。以下先分别说明三部分的编写方法。

一、增加事件响应

先看看增加事件响应的格式：< PUBLIC:ATTACH EVENT="事件名" ONEVENT="对应函数()" / >。例如：
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
onmouseover、onmouseout等是在制作动态网页时常用到的事件名，根据需要及浏览器版本（IE5.0以上）你也还可以再增加其他的事件。“ONEVENT”对应着各自的事件句柄，即当事件触发时要调用的函数或子程序名。

二、自定义“方法”

自定义方法格式：< PUBLIC:METHOD NAME="方法名" / >。例如：
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
“NAME”参数对应的是给定的“方法”名称。“方法”名就是在后面我们要定义的对应函数名称，但在方法名的后面不要带“()”括号。细心的读者可能已经注意到，这里方法名的定义有点像VB等可视化编程时的方法规则，只是把一个函数实体转化为对象的一个方法而已。

三、编写函数

接下来就是用我们熟悉的JavaScript脚本语句编写“事件句柄”和“方法”所对应的函数内容了，用以实现预期的效果，函数的内容参考下面源文件中的内容。
下面是源程序，其中的“element”参数指的是这个“行为”所附着的对象，因为“行为”总是被附着到页面的元件上面，而后才能通过这个元件发挥作用。正是这个特殊的“element”对象，使得我们定义的组件在所有网页中都适用，实现了代码重用的目的。函数中的具体内容只是简单更改对象属性形成动态网页效果，在此无须多作解释。
完整的“行为”文档“demo.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；
}
function font2blue(){
if (event.srcElement == element)
{
element.style.color='blue'；
}
}
function font2yellow(){
if (event.srcElement == element)
{
element.style.color='yellow'；
}
}
function glowit()
{
if (event.srcElement == element)
{
font_color=style.color；
element.style.color='white'；
element.style.filter="glow(color=red，strength=2)"；
}
}
function noglow()
{
if (event.srcElement == element)
{
element.style.filter=""；
element.style.color=font_color；
}
}
< /SCRIPT >
保存以上的行为组件文件到网页目录下后，我们就可以像使用外部样式表一样使用行为组件了。

四、在网页使用“行为”

使用“行为”组件时的格式也遵循样式表的原则。先将“行为”设置到一个样式，或者说是为自定义样式增加一个“行为”，然后就可以像平常设置普通样式一样为对象增加包含行为的样式了。例如：
< STYLE >
.myfilter{behavior:url(demo.htc)；position:relative；font-weight:bold；width=180；left:0；}
< /STYLE >
可以看出，这和我们熟知的样式表设置完全相同。如果你手工编辑过样式表或HTML内置滤镜，就会发现，它们的使用都是如此相像。这其实没什么好奇怪的，在HTML标准中它们都应该遵循统一的格式，以保持可扩展的特性。
上面的语句定义了一个样式名：“myfilter”，“behavior”是新增的“行为”属性名，这就是“行为”在样式表中的设置方式。括号中的内容是“行为”文档的文件名，本例中表明“行为”文档在与页面文件在同一个目录下，如果“行为”文档安置在其他目录下，在此参数的前面要加上相应的路径名，以保证可以正确地定位“行为”文档的位置。此“样式”中的其他内容就是普通的样式属性设置，可根据你的需要增减，但在此例中，由于使用了“glow”滤镜效果，还需要为对象设置一个宽度(width)属性，否则待会就看不到滤镜的效果了。
具体应用到对象时是这样：
行为产生的文字效果< /span >< br >
鼠标指向后产生辉光< /span >
以上语句里面没有什么新的内容，class='myfilter'就是我们所熟悉的样式设置。这可是网页动态效果中常用的方法，如果你还一时半会弄不懂，快翻出以前关于动态网页的文章补习补习吧。在第一个“span”标记的属性中还定义了一个“id”标记，这是稍后我们要用来演示调用“行为”内的“方法”而设置的。嗯，对象，方法，越来越有面像对象编程的感觉了吧？这样设置后，“span”元件中的内容就具有“行为”组件定义的以下效果了：
1.鼠标指针移动到文字内容上时，在文字周围产生红色的辉光效果，同时文字变成白色。
2.当鼠标按钮按下时，文字颜色改变为黄色。
3.鼠标按钮抬起后，文字颜色又改变为蓝色。
4.当鼠标指针移动到文字区域以外时，去掉了红色辉光效果，文字恢复原样。
从“方法”的使用上，我们才能体验到行为组件与样式的根本区别所在。为调用“方法”，我们定义两个按钮，以按钮事件触发刚才所定义对象的方法(当然，也可以在其他事件触发)：
向右移动第一行文字< /button >< br >
向下移动第一行文字< /button >
用按钮的onclick事件去调用这二个“方法”，先前定义的“id”标记就作为元件的对象名称，用“myspan.move_down”来调用“方法”，操纵这个对象。可以看到，在按下相应的按钮后，会使第一行的文字产生向下或向右的移动。这样，我们为对象赋予了“行为”，就等同于生成了一类“新对象”，这个对象具有自己独特的方法。
网页源文档完整内容如下：
< HTML >
< HEAD >
< TITLE >行为效果演示< /TITLE >
< STYLE >
.myfilter{behavior:url(demo.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 >
看到了吗？在这里，我们很容易地就在一个“行为”中同时组合了多种文字变化效果，通过简单的“样式”设置，任意地将它与页面元件相关联，体现了“行为”组件的优点和强大功能。
试想一下，如果不使用“行为”来完成上述的效果，虽然可以在页面内调用一组预定的函数来完成同样的功能，但页面内每一个使用文字效果的元件都要附加鼠标事件，如果在多个页面内使用相同的效果，被调用的函数也需要在每一个页面内重复设置。相比之下，孰优孰劣是很明显的。使用“行为”组件，可以制作出简洁、高效、通用和便于维护的页面。模块化是其最大的优点，对于以后的更新、移植来说，都是非常方便的。