javascript实现Observer模式来管理多个事件回调

时间:2010-04-11 19:22:53  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:mat.onclick=mouseObserver; cursor=document.getElementById('cursor'); } function mouseObserver(event){ var e=window.event||event; writeStatus(e) drawThumbnail(e) } 这样的方式目前看起来还算清晰,但是当事件增多时将不可避免地复杂起来,如果我们能像java中的事件处理模型那样直接addListener该多好,给出例子:...
  正文:比如,我要对ID为mousemat的div标签的onclick事件增加两个事件writestatus()和drawThumbnail(),更新状态栏和重定位鼠标位置这两个事件,典型的代码应该像这样:

window.onload=function(){
var mat=document.getElementById('mousemat');
mat.onclick=mouSEObserver;
cursor=document.getElementById('cursor');
}

function mouseObserver(event){
var e=window.event||event;
writeStatus(e)
drawThumbnail(e)
}
这样的方式目前看起来还算清晰,但是当事件增多时将不可避免地复杂起来,如果我们能像java中的事件处理模型那样直接addListener该多好,给出例子:

window.onload=function(){
var mat=document.getElementById('mousemat');
cursor=document.getElementById('cursor');

var mouseRouter=new jsEvent.EventRouter(mat,"onclick");
mouseRouter.addListener(writeStatus);
mouseRouter.addListener(drawThumbnail);
}

引入了一个EventRouter对象,此对象完整代码如下:

requires extras-array.js

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.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[i];
lsnr.call(this,e);
}
}

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

这段代码并不难理解,实现了一个事件顺序数组,增加的监听器函数通过Function.call()调用。两个方法addListener和removeListener真正实现了清晰的事件模型。 《javascript实现Observer模式来管理多个事件回调》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/13578.html


关键字:

关于《javascript实现Observer模式来管理多个事件回调》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td