Ajax combat: Using JavaScript to implement the viewer

The proposed solution is to define a generic event router object that attaches a standard function to the target element as an event callback and maintains a list of listener functions. This allows us to rewrite the Mousemat initialization code in the following way:

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

We define a Eventrouter object, pass in the DOM element and want to register the event type as a parameter. The listener function is then added to the router object and the Router object supports the RemoveListener () method, which we do not need. This object looks straightforward, but how do we achieve it?

First, we write a constructor for the object, which is just a function in JavaScript (Appendix B contains an introductory tutorial on JavaScript Object syntax.) If you don't understand the following code, you can refer to the tutorial.

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

We defined an array of listener functions (initially empty), saved a reference to the DOM element, and added a reference to the DOM element using the pattern described by the 3.5.1 section. Then we assign a static function of the Eventrouter class, simply called the callback, as the event handler function. Remember that in JavaScript, the square brackets and the dot notation are equivalent, which means that el.onmouseover and el[' onmouseover ' are the same. For ease of use, we pass the property name as a parameter in. This is similar to the reflection of Java or. NET languages.

And then, let's take a look at callback:

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

Because this is a callback function, the function context is the DOM node that triggers the event, not the router object. We use the back-end object pattern mentioned above to get a reference to the eventrouter that is already attached to the DOM node, and then call the router's notify () method to pass the event object in as a parameter.

The complete code for the Eventrouter object is shown in Listing 4-8.