ajax - 回調函數Observer實現例子

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" "http://www.w3.org/TR/html4/strict.dtd">
<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>

posted on 2006-08-14 08:50 software5168 阅读(755) 评论(0)  编辑  收藏 所属分类: Java學習


只有注册用户登录后才能发表评论。


网站导航:
 
<2006年8月>
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789

导航

统计

常用链接

留言簿(3)

随笔分类

随笔档案

收藏夹

JAVA學習網站

綜合

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜