Ajax实战：用JavaScript实现观察者

Ajax实战：用JavaScript实现观察者2011-09-06希赛网建议的解决方案是定义一个通用的事件路由器对象，它为目标元素附加一个标准函数，作为一个事件回调，并且维护一个监听器函数的列表。这允许我们以下面的方式重写mousemat的初始化代码：

window.onload=function（）{
var mat=document.getElementById（"mousemat"）;
...
var mouseRouter=new jsEvent.EventRouter（mat,"onmousemove"）;
mouseRouter.addListener（writeStatus）;
mouseRouter.addListener （drawThumbnail）;
}

我们定义了一个EventRouter对象，传入DOM元素并希望注册为参数的事件类型。然后向路由器对象增加监听器函数，路由器对象也支持removeListener（）方法，这里我们不需要该方法。这个对象看起来很直接，但是我们如何实现它呢？

首先，我们为对象编写一个构造函数，这在JavaScript中仅仅是一个函数（附录B包含了JavaScript对象语法的初级教程。如果不明白下面的代码，可以参考该教程）。

jsEvent.EventRouter=function（el,eventType）{
this.lsnrs=new Array（）;
this.el=el;
el.eventRouter=this;
el[eventType] =jsEvent.EventRouter.callback;
}

我们定义了监听器函数的数组（最初它是空的），保存了一个到DOM元素的引用，并且使用3.5.1节描述的模式给DOM元素添加了一个到这个对象的引用。然后我们分配一个EventRouter类的静态函数，简单地称作callback，作为事件处理函数。记住在JavaScript中，方括号和点记号是等同的，这意味着： el.onmouseover和el["onmouseover"]是相同的。为使用方便，我们将属性名称作为参数传递进来。这与Java或者.NET语言的反射是类似的。

然后，让我们看看callback：

jsEvent.EventRouter.callback=function（event）{
var e=event || window.event;
var router=this.eventRouter;
router.notify（e）
}

因为这是一个回调函数，函数上下文是触发事件的DOM节点，而不是路由器对象。我们使用前面提到的后端对象模式得到已经附加在 DOM 节点上的 EventRouter的引用，然后调用路由器的notify（）方法，将事件对象作为参数传递进来。

EventRouter对象的完整代码如代码清单4-8所示。