Ajax實戰：管理多個事件回調

在實現我們自己的解決方案之前，我們先通過一個簡單的例子來瞭解問題所在。代碼清單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()的代碼還算清晰。在理想情況下，我們希望使用一種更加清晰的方式來將事件監聽器串連在一起，以便可以擴充到更加複雜或動態情況。