Ajax Combat: Managing multiple Event callbacks

Before implementing our own solution, let's start with a simple example to understand the problem. Code Listing 4-7 shows a simple Web page in which a large div area responds to mouse movement events in two ways.

Code Listings 4-7 mousemat.html

First, it updates the state bar of the browser in the Writestatus () function, and then updates its image in the area by repositioning a point in the next small Thumbnail view area to replicate the movement of the mouse cursor position in the Drawthumbnail () function. Figure 4-6 shows the pages in the activity.

These two behaviors are independent of each other, and we want to be able to swap these behaviors with other responses to the mouse movement, even when the program is running.

Figure 4-6 the Mousemat program tracks mouse movement events in two ways in the "virtual Mousemat" main area: Updating the status bar below the browser with the mouse coordinates; the point where the mouse cursor is moved in the thumbnail view

The Mouseobserver () function is the event listener (by the way, the first line performs a bit of simple cross-browser magic.) Unlike Mozilla, Opera, or Safari, ie does not pass any arguments to the callback handler function, but instead saves the event object in Window.event. In this example, we call Writestatus () and Drawthumbnail () sequentially in the event handler function to make the two kinds of activity hard to join together. The program completes exactly what we want it to do, and because it's just a small program, the Code for Mouseobserver () is fairly clear. Ideally, we want to use a clearer way to connect event listeners so that they can be extended to more complex or dynamic situations.