1.EventRouter.js
/**
?* @author user
?*/
var jsEvent = new Array();
jsEvent.EventRouter = function(el,eventType){
?this.lsnrs = new Array();
?this.el = el;
?el.eventRouter = this;
?el[eventType] = jsEvent.EventRouter.callback;
};
jsEvent.EventRouter.prototype.addListener = function(lsnr){
?this.lsnrs.append(lsnr,true);?
} ;
jsEvent.EventRouter.prototype.notify = function(e){
?var lsnrs = this.lsnrs;
?for(var i=0;i<lsnrs.length;i++){
??var lsnr = lsnrs[i];
??lsnr.call(this,e);
?}
};
jsEvent.EventRouter.callback=function(event){
?var e = event || window.event;
?var router = this.eventRouter;
?router.notify(e);
};
Array.prototype.append = function(obj,nodup){
?if(nodup){?
??this[this.length]=obj;
?}
};
2.mousemat.css
.mousemat{
?background-color:#ffe0d0;
?border:solid maroon 0px;
?position:absolute;
?margin:0px;
?width:500px;
?height:500px;
?top:50px;
?left:50px;?
}
.thumbnail{
?background-color:#ffe0d0;
?border:solid maroon 0px;
?position:absolute;
?margin:0px;
?width:100px;
?height:100px;
?top:50px;
?left:600px;?
}
.cursor{
?background-color:blue;
?position:relative;
?height:5px;
?width:5px;
}
3.mousemat.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<html>
?<head>
??<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
??<title>Untitled Document</title>
??<link rel='stylesheet' type = 'text/css' href = 'mousemat.css'>
??<script type ='text/javascript' src = 'EventRouter.js'></script>
??<script type='text/javascript'>
???var cursor = null;
???window.onload = function(){
????var mat = document.getElementById('mousemat');
????cursor = document.getElementById('cursor');
????var mouseRouter = new jsEvent.EventRouter(mat,"onmousemove");
????//var mouseRouter = new jsEvent.EventRouter(mat,"onclick");
????mouseRouter.addListener(writeStatus);
????mouseRouter.addListener(drawThumbnail);
???};
???function writeStatus(e){
????window.status = e.clientX + "," + e.clientY;
???}
???function drawThumbnail(e){
????cursor.style.left = ((e.clientX/5)-2) + "px";
????cursor.style.top = ((e.clientY/5)-2) + "px";
???}
??</script>
?</head>
?<body>
??<div class='mousemat' id='mousemat'></div>
??<div class='thumbnail' id='thumbnail'>
???<div class = 'cursor' id = 'cursor'></div>
??</div>
?</body>
</html>