AJAX In Action [74]
4.3.3 Implementing a flexible event model in JavaScript
Because of the incompatibilities of the newer W3C event model, the promise of a flexible event listener framework remains just out of reach. We described the Observer pattern in chapter 3, and that seems to fit the bill nicely, allowing us to add and remove observers from the event source in a flexible fashion. Clearly, the W3C felt the same way, as the revised event model implements Observer, but the browser vendors delivered inconsistent and just plain broken implementations. The classic event model falls far short of the Observer pattern, but perhaps we can enhance it a little with some code of our own.
Managing multiple event callbacks
Before going on to implement our own solution, let’s come to grips with the problem through a simple example. Listing 4.7 shows a simple web page, in which a large DIV area responds to mouse move events in two ways.
Listing 4.7 mousemat.html
First, it updates the browser status bar, in the writeStatus() function. Second, it updates a smaller thumbnail image of itself, by repositioning a dot in the thumbnail area, to copy the mouse pointer’s movements, in the drawThumbnail() function. Figure 4.6 shows the page in action. These two actions are independent of each other, and we would like to be able to swap these and other responses to the mouse movement in and out at will, even while the program is running.
The mouseObserver() function is our event listener. (The first line is performing some simple cross-browser magic, by the way. Unlike Mozilla, Opera, or Safari, Internet Explorer doesn’t pass any arguments to the callback handler function, but stores the Event object in window.event.) In this example, we have hardwired the two activities in the event handler, calling writeStatus() and drawThumbnail() in turn. The program does exactly what we want it to do, and, because it is a small program, the code for mouseObserver() is reasonably clear. Ideally, though, we would like a cleaner way to wire the event listeners together, allowing the approach to scale to more complex or dynamic situations. Implementing Observer in JavaScript
The proposed solution is to define a generic event router object, which attaches a standard function to the target element as an event callback and maintains a list of listener functions. This would allow us to rewrite our mousemat initialization code in this way:
Licensed to jonathan zheng 140 CHAPTER 4 The page as an application window.onload=function(){ var mat=document.getElementById('mousemat'); ... var mouseRouter=new jsEvent.EventRouter(mat,"onmousemove"); mouseRouter.addListener(writeStatus); mouseRouter.addListener(drawThumbnail); } We define an EventRouter object, passing in the DOM element and the type of event that we would like to register as arguments. We then add listener functions to the router object, which also supports a removeListener() method that we don’t need here. It looks straightforward, but how do we implement it? Figure 4.6 The Mousemat program tracks mouse movement