JavaScript 中的有限状态机，第 3 部分: 测试小部件

核心提示： 第一个工具提示用在标识符为 TestLabel 的 HTML 元素上，只需用最简单的自变量来创建：内容是纯文本，JavaScript 中的有限状态机，第 3 部分: 测试小部件(4)，并忽略参数自变量，因此对所有参数使用默认值，当鼠标经过具有 FadingTooltip 部件的任何 HTM

第一个工具提示用在标识符为 TestLabel 的 HTML 元素上，只需用最简单的自变量来创建：内容是纯文本，并忽略参数自变量，因此对所有参数使用默认值。第二个工具提示用在 TestInput HTML 元素上，它的内容需要用一些标记进行格式化，并指定淡入和淡出时间（以秒为单位）。第三个工具提示用在 TestButton HTML 元素上，在它的格式化内容中包含一个图像，并指定更多的参数，包括一个对工具提示应用样式的 Cascading Stylesheet（CSS）类。

Mozilla Firefox 是最新颖的浏览器，而且比其他浏览器更接近开放标准，所以我们先从它开始。（如果使用 microsoft Internet Explorer，那么可以跳过这一段，阅读关于 不应该发生的情况 和 淡入/淡出不起作用 的两节，然后再返回这里。）

现在进行 测试。测试页面包含一些具有内置工具提示的 HTML 元素，还包含上面描述的 FadingTooltip 的示例，所以可以对比它们的效果。您会注意到 FadingTooltip 的行为更加精致。它们淡入和淡出视图，而不是直接跳出和消失，而且当鼠标进入和离开 HTML 元素时淡化方向相反。它们会随鼠标移动，当键盘事件发生时不消失。它们具有更精致的外观：FadingTooltip 具有样式，它们的文本进行了格式化，还可以包含图像。

您可以自己判断这些差异是否有改进，是否值得花时间和精力来开发自己的工具提示部件。如果想开发自己的工具提示部件，那么可以将这个实现的源文件和测试页面复制到硬盘上，然后就可以修改参数、样式或代码（参见 下载）。开发时不需要自己的 Web 服务器；只要使用 file://... URL 将修改后的测试页面加载到浏览器中即可。

当出现不应该发生的事件时

到目前为止，Microsoft Internet Explorer 是使用最广泛的浏览器，所以也必须在 IE 中对实现进行测试，而且用不了多久就能发现问题。当鼠标经过具有 FadingTooltip 部件的任何 HTML 元素时，立刻就会出现一个警告，如图 1 所示。