Ajax实战：管理多个事件回调

Ajax实战：管理多个事件回调2011-09-06在实现我们自己的解决方案之前，我们先通过一个简单的例子来了解问题所在。代码清单4-7显示了一个简单的Web页面，其中一个大的DIV区域以两种方式响应鼠标的移动事件。

代码清单4-7 mousemat.html

首先，它在writeStatus（）函数中更新了浏览器的状态条，然后在drawThumbnail（）函数中通过在旁边小的缩略视图区域中重新定位一个点，更新自己在这个区域的映像，以此来复制鼠标光标位置的移动。图4-6显示了活动中的页面。

这两个行为是彼此独立的，我们希望能够将这些行为和鼠标移动的其他响应进行交换，即使是在程序运行时。

图4-6 mousemat程序在“虚拟mousemat”主区域以两种方式追踪鼠标移动事件：以鼠标的坐标更新浏览器下方的状态条;在缩略视图上随着鼠标光标同步移动的点

mouseObserver（）函数是事件监听器（顺便说一下，第一行执行了一点简单的跨浏览器魔法。与Mozilla、Opera或者Safari不同，IE不向回调处理函数传递任何参数，而是将Event对象保存在window.event中）。在这个例子中，我们在事件处理函数中依次调用writeStatus（）和drawThumbnail（），将两种活动硬连接在一起。程序准确地完成了我们希望它做的事情，并且因为这只是一个小程序，mouseObserver（）的代码还算清晰。在理想情况下，我们希望使用一种更加清晰的方式来将事件监听器连接在一起，以便可以扩展到更加复杂或动态的情况。