寫的一個比較簡單的事件管理器，主要從這些方面進行的考慮：
1、實現事件的注冊/反注冊。
2、實現事件的調用。
3、注冊事件的攔截器(方法執行前或執行后)。
目前寫的這個版本還比較簡單，后一步需要增加事件的有效范圍以及事件的攔截器的有效范圍的支持，就是scope的概念，還有一個需要改進的地方是將目前事件調用的部分改為COR模式。
源碼如下：
/**//*
* ============================================================
* Copyright (C) 2006
* ------------------------------------------------------------
* CVS $Author: BlueDavy $
* ------------------------------------------------------------
* 事件管理器
* 1、事件的注冊/反注冊
* 2、事件的調用
* 3、事件的攔截器(事件執行前和事件執行后)
* TODO：事件執行的有效范圍
* 攔截器的有效范圍
* COR Pattern
* ============================================================
*/
var EventManager=Class.create();
// 事件集合
EventManager.events=
{};
// 注冊事件
EventManager.registerEvent=function(eventalias,event){
EventManager.events[eventalias]=event;
}
// 反注冊事件
EventManager.unregisterEvent=function(eventalias){
EventManager.events[eventalias]=null;
}
// 攔截器集合
EventManager.interceptors={};
// 攔截器常量定義
EventManager.Interceptor={
BEFORE:"before",
AFTER:"after"
}
// 事件的調用
EventManager.invoke=function(eventalias){
return function(){
var bindevent=EventManager.events[eventalias];
if(bindevent!=null){
try{
EventManager.invokeInterceptor(eventalias,EventManager.Interceptor.BEFORE);
bindevent.apply(this,[event]);
EventManager.invokeInterceptor(eventalias,EventManager.Interceptor.AFTER);
}
catch(e){
// 不做任何提示
}
}
}
}
// 執行攔截器
EventManager.invokeInterceptor=function(eventalias,type){
var typeInterceptors=EventManager.interceptors[type];
if(typeInterceptors==null){
return;
}
var interceptors=typeInterceptors[eventalias];
if(interceptors==null){
return;
}
for(var i=0;i<interceptors.length;i++){
try{
interceptors[i].apply(this,[event]);
}
catch(e){
// 不做任何提示
}
}
}
// 注冊方法執行前的攔截器
EventManager.addBeforeInterceptor=function(eventalias,interceptor){
EventManager.addInterceptor(eventalias,interceptor,EventManager.Interceptor.BEFORE);
}
// 刪除方法執行前的攔截器
EventManager.removeBeforeInterceptor=function(eventalias,interceptor){
EventManager.removeInterceptor(eventalias,interceptor,EventManager.Interceptor.BEFORE);
}
// 注冊方法執行后的攔截器
EventManager.addAfterInterceptor=function(eventalias,interceptor){
EventManager.addInterceptor(eventalias,interceptor,EventManager.Interceptor.AFTER);
}
// 刪除方法執行后的攔截器
EventManager.removeAfterInterceptor=function(eventalias,interceptor){
EventManager.removeInterceptor(eventalias,interceptor,EventManager.Interceptor.AFTER);
}
// 添加攔截器
EventManager.addInterceptor=function(eventalias,interceptor,type){
var typeInterceptors=EventManager.interceptors[type];
if(typeInterceptors==null){
typeInterceptors={};
}
var interceptors=typeInterceptors[eventalias];
if(interceptors==null){
interceptors=new Array();
}
interceptors.push(interceptor);
typeInterceptors[eventalias]=interceptors;
EventManager.interceptors[type]=typeInterceptors;
}
// 刪除攔截器
EventManager.removeInterceptor=function(eventalias,interceptor,type){
var typeInterceptors=EventManager.interceptors[type];
if(typeInterceptors==null){
return;
}
var interceptors=typeInterceptors[eventalias];
if(interceptors==null){
return;
}
interceptors.remove(interceptor);
typeInterceptors[eventalias]=interceptors;
EventManager.interceptors[type]=typeInterceptors;
}
示例如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title>::事件管理器示例::</title>
<script src="js/prototype.js"></script>
<script src="js/EventManager.js"></script>
</head>
<body>
<input type=button name=btnTest value=演示>
</body>
<script>
function newEvent(){
alert("新增動作");
}
function beforeNewEvent(){
alert("新增動作執行前");
}
function validatorNewEvent(){
alert("執行校驗攔截器");
}
function afterNewEvent(){
alert("新增動作執行后");
}
EventManager.registerEvent("newevent",newEvent);
EventManager.addBeforeInterceptor("newevent",beforeNewEvent);
EventManager.addBeforeInterceptor("newevent",validatorNewEvent);
EventManager.addAfterInterceptor("newevent",afterNewEvent);
$('btnTest').onclick=EventManager.invoke("newevent");
</script>
</html>