function EventTarget(){ this.handlers={}; } EventTarget.prototype={ constructor:EventTarget, addHandler:function(type,handler){ if(typeof this.handlers[type]=='undefined'){ this.handlers[type]=new Array(); } this.handlers[type].push(handler); }, removeHandler:function(type,handler){ if(this.handlers[type] instanceof Array){ var handlers=this.handlers[type]; for(var i=0,len=handlers.length;i<len;i++){ if(handler[i]==handler){ handlers.splice(i,1); break; } } } }, trigger:function(event){ if(!event.target){ event.target=this; } if(this.handlers[event.type] instanceof Array){ var handlers=this.handlers[event.type]; for(var i=0,len=handlers.length;i<len;i++){ handlers[i](event); } } } }
addHandler方法用于添加事件处理程序，removeHandler方法用于移除事件处理程序，所有的事件处理程序在属性handlers中统一存储管理。调用trigger方法触发一个事件，该方法接收一个至少包含type属性的对象作为参数，触发的时候会查找handlers属性中对应type的事件处理程序。写段代码测试一下。
function onClose(event){ alert('message:'+event.message); } var target=new EventTarget(); target.addHandler('close',onClose); //浏览器不能帮我们创建事件对象了，自己创建一个 var event={ type:'close', message:'Page Cover closed!' }; target.trigger(event);
function extend(subType,superType){ var prototype=Object(superType.prototype); prototype.constructor=subType; subType.prototype=prototype; }
最后写成的版本就是这样的
<!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css" > html,body { height:100%; width:100%; padding:0; margin:0; } .dialog { position:fixed; width:300px; height:300px; top:50%; left:50%; margin-top:-200px; margin-left:-200px; box-shadow:2px 2px 4px #ccc; background-color:#f1f1f1; z-index:30; display:none; } .dialog .title { font-size:16px; font-weight:bold; color:#fff; padding:4px; background-color:#404040; } .dialog .close { width:20px; height:20px; margin:3px; float:right; cursor:pointer; } .pageCover { width:100%; height:100%; position:absolute; z-index:10; background-color:#666; opacity:0.5; display:none; } </style> </head> <body> <div id="pageCover" class="pageCover"></div> <input type="button" value="Dialog Test" onclick="openDialog();"/> <div id="dlgTest" class="dialog"> <img class="close" alt="" src="images/close.png"> <div class="title">Dialog</div> <div class="content"> </div> </div> <script type="text/javascript"> function EventTarget(){ this.handlers={}; } EventTarget.prototype={ constructor:EventTarget, addHandler:function(type,handler){ if(typeof this.handlers[type]=='undefined'){ this.handlers[type]=new Array(); } this.handlers[type].push(handler); }, removeHandler:function(type,handler){ if(this.handlers[type] instanceof Array){ var handlers=this.handlers[type]; for(var i=0,len=handlers.length;i<len;i++){ if(handler[i]==handler){ handlers.splice(i,1); break; } } } }, trigger:function(event){ if(!event.target){ event.target=this; } if(this.handlers[event.type] instanceof Array){ var handlers=this.handlers[event.type]; for(var i=0,len=handlers.length;i<len;i++){ handlers[i](event); } } } } </script> <script type="text/javascript"> function extend(subType,superType){ var prototype=Object(superType.prototype); prototype.constructor=subType; subType.prototype=prototype; } </script> <script type="text/javascript"> function Dialog(id){ EventTarget.call(this) this.id=id; var that=this; document.getElementById(id).children[0].onclick=function(){ that.close(); } } extend(Dialog,EventTarget); Dialog.prototype.show=function(){ var dlg=document.getElementById(this.id); dlg.style.display='block'; dlg=null; } Dialog.prototype.close=function(){ var dlg=document.getElementById(this.id); dlg.style.display='none'; dlg=null; this.trigger({type:'close'}); } </script> <script type="text/javascript"> function openDialog(){ var dlg=new Dialog('dlgTest'); dlg.addHandler('close',function(){ document.getElementById('pageCover').style.display='none'; }); document.getElementById('pageCover').style.display='block'; dlg.show(); } </script> </body> <html>