寫的一個(gè)比較簡單的事件管理器，主要從這些方面進(jìn)行的考慮：
1、實(shí)現(xiàn)事件的注冊/反注冊。
2、實(shí)現(xiàn)事件的調(diào)用。
3、注冊事件的攔截器(方法執(zhí)行前或執(zhí)行后)。
目前寫的這個(gè)版本還比較簡單，后一步需要增加事件的有效范圍以及事件的攔截器的有效范圍的支持，就是scope的概念，還有一個(gè)需要改進(jìn)的地方是將目前事件調(diào)用的部分改為COR模式。
源碼如下：
/**//*
* ============================================================
* Copyright (C) 2006
* ------------------------------------------------------------
* CVS $Author: BlueDavy $
* ------------------------------------------------------------
* 事件管理器
* 1、事件的注冊/反注冊
* 2、事件的調(diào)用
* 3、事件的攔截器(事件執(zhí)行前和事件執(zhí)行后)
* TODO：事件執(zhí)行的有效范圍
* 攔截器的有效范圍
* 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"
}
// 事件的調(diào)用
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){
// 不做任何提示
}
}
}
}
// 執(zhí)行攔截器
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){
// 不做任何提示
}
}
}
// 注冊方法執(zhí)行前的攔截器
EventManager.addBeforeInterceptor=function(eventalias,interceptor){
EventManager.addInterceptor(eventalias,interceptor,EventManager.Interceptor.BEFORE);
}
// 刪除方法執(zhí)行前的攔截器
EventManager.removeBeforeInterceptor=function(eventalias,interceptor){
EventManager.removeInterceptor(eventalias,interceptor,EventManager.Interceptor.BEFORE);
}
// 注冊方法執(zhí)行后的攔截器
EventManager.addAfterInterceptor=function(eventalias,interceptor){
EventManager.addInterceptor(eventalias,interceptor,EventManager.Interceptor.AFTER);
}
// 刪除方法執(zhí)行后的攔截器
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("新增動作執(zhí)行前");
}
function validatorNewEvent(){
alert("執(zhí)行校驗(yàn)攔截器");
}
function afterNewEvent(){
alert("新增動作執(zhí)行后");
}
EventManager.registerEvent("newevent",newEvent);
EventManager.addBeforeInterceptor("newevent",beforeNewEvent);
EventManager.addBeforeInterceptor("newevent",validatorNewEvent);
EventManager.addAfterInterceptor("newevent",afterNewEvent);
$('btnTest').onclick=EventManager.invoke("newevent");
</script>
</html>