dennis_zane 发表于 2013-1-29 13:10:09

传统javascript事件模型实现观察者模式

在W3C新的事件模型框架中,IE和Mozilla都实现了相应的版本,IE的是attachEvent和detachEvent来实现元素事件的添加和删除,而Mozilla则是标准的addEventListener和 removeEventListener。在传统的javascript事件模型中,我们没办法为一个页面元素注册多个事件,只有靠自己来实现观察者模式。代码来自《ajax in action》,我添加了注释
<div style="border: 1px solid rgb(204, 204, 204); padding: 4px 5px 4px 4px; background-color: rgb(238, 238, 238); font-size: 13px; width: 98%;"><!---->//命名空间
var jsEvent = new Array();

//构造函数
jsEvent.EventRouter = function(el,eventType){
 //内部维护一个事件列表
 this.lsnrs = new Array();
 this.el = el;
 el.eventRouter = this;
 //注册回调函数
 el = jsEvent.EventRouter.callback;
};

//添加事件
jsEvent.EventRouter.prototype.addListener = function(lsnr){
 this.lsnrs.append(lsnr,true); 
} ;

//移除事件
jsEvent.EventRouter.prototype.removeListener=
function(lsnr){ 
this.lsnrs.remove(lsnr); 
}; 

//通知所有事件
jsEvent.EventRouter.prototype.notify = function(e){
 var lsnrs = this.lsnrs;
 for(var i=0;i<lsnrs.length;i++){
  var lsnr = lsnrs;
  lsnr.call(this,e);
 }
};
//回调函数调用notify
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;
 }
};
Array.prototype.remove = function(o)
{
   var i = this.indexOf(o);
   if (i>-1)
  {
    this.splice(i,1);
   }
     return (i>-1);
   }  
}; 
页: [1]
查看完整版本: 传统javascript事件模型实现观察者模式