JavaScript 中的有限状态机，第 2 部分: 实现组件

核心提示： 传递给 addEventListener 方法的匿名函数看起来并不复杂，当鼠标事件发生时，JavaScript 中的有限状态机，第 2 部分: 实现组件(6)，浏览器将调用它们，将 event 对象传递给它们， 这是使用函数闭包在函数定义中封闭变量的第一种方法，但不是惟一的方法，它们将传递

传递给 addEventListener 方法的匿名函数看起来并不复杂。当鼠标事件发生时，浏览器将调用它们，将 event 对象传递给它们，它们将传递给 FadingTooltip 对象的 handleEvent 方法。浏览器的事件对象包含事件类型以及鼠标位置，所以一个 handleEvent 方法可以处理部件必须响应的所有鼠标事件。

这些简单的匿名函数还执行另一个重要而微妙的任务。在 W3C 事件模型中，用 HTML 元素的 addEventListener 方法注册的函数会成为这个元素的方法，所以当浏览器调用它们时，内置的 this 变量会指向这个 HTML 元素。但是，handleEvent 方法需要一个包含状态变量的 FadingTooltip 对象的指针。一种实现方式是在 HTML 元素上添加一个 fadingTooltip 属性，这个属性指向 FadingTooltip 对象，然后用它调用对象的 handleEvent 方法。这样的话，当执行 handleEvent 方法时，this 会指向 FadingTooltip 对象。

在 Internet Explorer 中连接鼠标事件

Microsoft Internet Explorer 当前不支持提议的 W3C 标准事件模型，而是提供它自己的一个相似的事件模型。它们之间的差异如下：

事件类型略有不同

注册的函数不会成为 HTML 元素的方法

事件对象留在全局的 window 对象中

如果可用的话，可以调用 HTML 元素的 attachEvent 方法来连接事件，调用时要传递略有不同的事件类型和函数，见 清单 4。

这是使用函数闭包在函数定义中封闭变量的第一种方法，但不是惟一的方法，目前就采用这种方法。

清单 4. 在 Internet Explorer 中连接鼠标事件的 JavaScript 代码

function FadingTooltip(htmlElement, tooltipContent, parameters) {
　　...
　　else if (htmlElement.attachEvent) { // for MSIE
　　　　htmlElement.attachEvent(
　　　　　　'onmouseover',
　　　　　　function() { htmlElement.fadingTooltip.handleEvent(window.event); } );
　　　　htmlElement.attachEvent(
　　　　　　'onmousemove',
　　　　　　function() { htmlElement.fadingTooltip.handleEvent(window.event); } );
　　　　htmlElement.attachEvent(
　　　　　　'onmouseout',　
　　　　　　function() { htmlElement.fadingTooltip.handleEvent(window.event); } );
　　}
　　...