创建 Behavior 脚本部件与创建任何其他类型的脚本部件类似,只是需要将 Microsoft® Internet Explorer 的事件链接到为响应这些事件而运行的脚本。
本主题分为下述部分:
Behavior 脚本部件包括一个 <implements> 元素,用来指定 Behavior 接口处理程序。在 <implements> 元素内,可以使用:
Behavior 脚本部件还可以包括自定义属性和方法,以扩大包含文档中的元素已经可用的属性和方法。详细信息请参阅在 Behavior 脚本部件中说明属性和方法。
下面的示例演示了一个 Behavior 脚本部件,只要鼠标从包含页面中的某个元素上经过,该脚本部件就会更改该元素的颜色。为了实现这一点,该示例将 DHTML 的 onmouseover 和 onmouseout 事件绑定到脚本小程序中设置元素的 DHTML 样式属性的函数。通过绑定到 DHTML 窗口对象的 onload 事件,该示例还可以在初始化该文档时设置文档的链接颜色。
除了将事件绑定到脚本,脚本部件还可以将文本插入包含文档中的任何 <H1> 元素中,该文档被链接到该脚本部件。最后,它还说明并激活了一个称为 onchange 的事件,该事件使用一个称为 newvalue 的自定义属性扩展了 DHTML 窗口对象的事件对象。
注意 CDATA 项是必需的,以使 <script> 元素中的脚本成为不透明的。详细信息请参阅脚本部件文件和 XML 一致性。
<?XML version="1.0"?>
<component>
<implements type="Behavior"
>
<comment> 当鼠标经过包含文档的该元素时,
下面的代码将将调用 do_nmousedown 和
do_mouseout 函数。</comment>
<attach event="onmouseover" handler="do_onmouseover"/>
<attach event="onmouseout" handler="do_onmouseout"/>
<comment> 当窗口的 onload 事件被激活时,
这些代码将调用 init 函数。</comment>
<attach for="window" event="onload" handler="docinit"/>
<comment> 下面定义了将出现在
包含文档中的 HTML 文本。</comment>
<layout>
<h1>This is the HTML to show in the element</h1>
</layout>
<comment> 下面定义了一个自定义事件,该事件将
通过脚本部件内的 fireEvent 方法被激活。</comment>
<public>
<event name="onchange"/>
</public>
</implements>
<script language="JScript">
<![CDATA[
var normalColor, normalSpacing;
function do_onmouseover(){
// 保存原始值。
normalColor = style.color;
normalSpacing= style.letterSpacing;
style.color = "red";
style.letterSpacing = 2;
oEvent = createEventObject();
oEvent.newcolor = "red";
fireEvent("onchange",oEvent);
}
function do_onmouseout(){
// 恢复原始值
style.color = normalColor;
style.letterSpacing = normalSpacing;
}
function docinit(){
document.linkColor = "red";
}
]]>
</script>
</component>
在前面的代码中有一些情况需要说明:
注意 内嵌脚本是在将操作应用于元素之前执行的,这将限制哪些语句可以在内嵌脚本中执行。例如,如果该示例中的某个操作说明了一个称为 hiliteColor 的属性,内嵌脚本可以直接引用 hiliteColor (换句话说,它直接解析该脚本部件的命名空间)。不过,如果在内嵌脚本中使用 Behavior.element.hiliteColor 的形式来引用hiliteColor 则是不合法的,因为此时该操作尚没有应用于该元素。详细信息请参阅本主题稍后的范围规则 以及时序注意事项。
下面是为了增加对操作的支持, Microsoft® Internet Explorer 5 对 DHTML 对象模型所做的增强。
在 DHTML 中,DHTML 事件对象提供了事件的有关信息。尽管在 DHTML 中事件处理程序可以通过 DHTML 窗口对象来访问事件对象,但在操作脚本部件中事件对象是作为一个参数传递给事件处理程序的。
下面的代码来自一个虚构的计算器脚本部件,其中将键盘和鼠标事件都绑定到称为 doCalc 的脚本部件函数。doCalc 函数使用该事件对象来获取有关激活该事件的情况的信息。
注意 CDATA 项是必需的,以使 <script> 元素中的脚本成为不透明的。详细信息请参阅脚本部件文件和 XML 一致性。
<implements type="Behavior"> <attach event="onclick" handler="doCalc"/> <attach event="onkeydown" handler="doCalc"/> </implements> <script language="jscript"> <![CDATA[ function doCalc(oEventParam){ oElement = oEventParam.srcElement; if(oEventParam.type == "keydown"){ sVal = KeyCodeToChar(oEventParam.keyCode); } else{ if (oEventParam.srcElement.type != "button"){ return;} sVal = stripBlanks(oEventParam.srcElement.value); } } // 此处为其他脚本。 ]]> </script>
在使用脚本部件时,实际使用了三个命名空间:操作、元素、以及包含文档。范围规则就是定义在操作脚本部件中解决名称冲突的顺序。名称冲突将按下面的顺序进行分析:
不管是变量、操作定义的属性、方法或事件,该名称都将被解析为由脚本部件的任何操作所定义的名称。
如果解析失败,则将该名称作为应用于该元素的属性、方法或事件来解析。
最后,该名称将作为应用于包含页面的窗口对象的属性、方法或事件的名称。
在下面的示例中,请注意如何使用上面的范围规则来解析这些名字:
<implements type="Behavior"
>
<attach event="onmouseover" handler="do_onmouseover"/>
<attach event="onmouseout "handler="do_onmouseout"/>
</implements>
<script language="JScript">
<![CDATA[
var normalColor, normalSpacing;
function event_onmouseover()
{
// 保存原始值。
normalColor = style.color;
normalSpacing = style.letterSpacing;
style.color = "red";
style.letterSpacing = 2;
}
function event_onmouseout()
{
// 恢复原始值。
style.color = normalColor;
style.letterSpacing = normalSpacing;
}
]]>
</script>
在创建操作时,了解何时将操作应用于元素是很重要的。在操作被应用之前,脚本不能访问操作所定义的属性值,因为这些值可能是在文档中设置的。
由于操作被封装在与 HTML 文档不同的独立文件中,它和该文档的其他部分是分开下载的。在分析和载入文档和操作时,该操作通过用 attachNotification 方法指定的函数来接收通知。目前,可以使用“contentChange”或“documentReady” 通知来通知操作。在对已绑定该操作的元素内容进行分析后,只要该元素的内容被更改后就会发送“contentChange”通知。而“documentReady”通知是在下载并分析该文档后发送的。
由于只要实例化该操作,就会执行脚本部件文件中的内嵌脚本,因此在内嵌脚本中那些由操作定义的将在文档中设置的属性值可能无法被访问。不过,这些属性在首次发送 “contentChange”通知后就是可用的。
在 Behavior 脚本部件中说明属性和方法 | 在 Behavior 脚本部件中说明自定义事件 | Behavior 处理程序参考