javascript事件模型框架

最近一直在读《javascript高级程序设计》，也快读完了，读到事件这一章，书中提供的一个事件工具类很实用，我注释了一下，并摘记：

// eventutil.js
var EventUtil = new Object;
/*
此方法用来给特定对象添加事件，oTarget是指定对象,sEventType是事件类型，如click、keydown等，    fnHandler是事件回调函数
/*
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
//firefox情况下
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
}
//IE下
else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
}
else {
oTarget["on" + sEventType] = fnHandler;
}
};
/*
此方法用来移除特定对象的特定事件，oTarget是指定对象,sEventType是事件类型，如click、keydown等，fnHandler是事件回调函数
/*
EventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};

/*
格式化事件，因为IE和其他浏览器下获取事件的方式不同并且事件的属性也不尽相同，通过此方法提供一个一致的事件
*/
EventUtil.formatEvent = function (oEvent) {
// isIE和isWin引用到一个js文件，判断浏览器和操作系统类型
if (isIE && isWin) {
oEvent.charCode = (oEvent.type == " keypress " ) ? oEvent.keyCode : 0 ;
// IE只支持冒泡，不支持捕获
oEvent.eventPhase = 2 ;
oEvent.isChar = (oEvent.charCode > 0 );
oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
oEvent.pageY = oEvent.clientY + document.body.scrollTop;
// 阻止事件的默认行为
oEvent.preventDefault = function () {
this .returnValue = false ;
} ;

// 将toElement,fromElement转化为标准的relatedTarget
if (oEvent.type == " mouseout " ) {
oEvent.relatedTarget = oEvent.toElement;
} else if (oEvent.type == " mouseover " ) {
oEvent.relatedTarget = oEvent.fromElement;
}
// 取消冒泡
oEvent.stopPropagation = function () {
this .cancelBubble = true ;
} ;

oEvent.target = oEvent.srcElement;
// 添加事件发生时间属性，IE没有
oEvent.time = ( new Date).getTime();
}
return oEvent;
} ;

EventUtil.getEvent = function () {
if (window.event) {
// 格式化IE的事件
return this .formatEvent(window.event);
} else {
return EventUtil.getEvent.caller.arguments[ 0 ];
}
} ;

附带上一个判断浏览器和系统类型的js文件，通过引入一些名字显而易见的全局变量作为判断的结果，使用时需要小心变量名称冲突：

// detect.js，同样来自《JAVASCRIPT高级程序设计》
var sUserAgent = navigator.userAgent;
var fAppVersion = parseFloat(navigator.appVersion);

function compareVersions(sVersion1, sVersion2) {

var aVersion1 = sVersion1.split( " . " );
var aVersion2 = sVersion2.split( " . " );

if (aVersion1.length > aVersion2.length) {
for ( var i = 0 ; i < aVersion1.length - aVersion2.length; i ++ ) {
aVersion2.push( " 0 " );
}
} else if (aVersion1.length < aVersion2.length) {
for ( var i = 0 ; i < aVersion2.length - aVersion1.length; i ++ ) {
aVersion1.push( " 0 " );
}
}

for ( var i = 0 ; i < aVersion1.length; i ++ ) {

if (aVersion1[i] < aVersion2[i]) {
return - 1 ;
} else if (aVersion1[i] > aVersion2[i]) {
return 1 ;
}
}

return 0 ;

}

var isOpera = sUserAgent.indexOf( " Opera " ) > - 1 ;
var isMinOpera4 = isMinOpera5 = isMinOpera6 = isMinOpera7 = isMinOpera7_5 = false ;

if (isOpera) {
var fOperaVersion;
if (navigator.appName == " Opera " ) {
fOperaVersion = fAppVersion;
} else {
var reOperaVersion = new RegExp( " Opera (//d+//.//d+) " );
reOperaVersion.test(sUserAgent);
fOperaVersion = parseFloat(RegExp[ " $1 " ]);
}

isMinOpera4 = fOperaVersion >= 4 ;
isMinOpera5 = fOperaVersion >= 5 ;
isMinOpera6 = fOperaVersion >= 6 ;
isMinOpera7 = fOperaVersion >= 7 ;
isMinOpera7_5 = fOperaVersion >= 7.5 ;
}

var isKHTML = sUserAgent.indexOf( " KHTML " ) > - 1
|| sUserAgent.indexOf( " Konqueror " ) > - 1
|| sUserAgent.indexOf( " AppleWebKit " ) > - 1 ;

var isMinSafari1 = isMinSafari1_2 = false ;
var isMinKonq2_2 = isMinKonq3 = isMinKonq3_1 = isMinKonq3_2 = false ;

if (isKHTML) {
isSafari = sUserAgent.indexOf( " AppleWebKit " ) > - 1 ;
isKonq = sUserAgent.indexOf( " Konqueror " ) > - 1 ;

if (isSafari) {
var reAppleWebKit = new RegExp( " AppleWebKit///(//d+(?://.//d*)?) " );
reAppleWebKit.test(sUserAgent);
var fAppleWebKitVersion = parseFloat(RegExp[ " $1 " ]);

isMinSafari1 = fAppleWebKitVersion >= 85 ;
isMinSafari1_2 = fAppleWebKitVersion >= 124 ;
} else if (isKonq) {

var reKonq = new RegExp( " Konqueror///(//d+(?://.//d+(?://.//d)?)?) " );
reKonq.test(sUserAgent);
isMinKonq2_2 = compareVersions(RegExp[ " $1 " ], " 2.2 " ) >= 0 ;
isMinKonq3 = compareVersions(RegExp[ " $1 " ], " 3.0 " ) >= 0 ;
isMinKonq3_1 = compareVersions(RegExp[ " $1 " ], " 3.1 " ) >= 0 ;
isMinKonq3_2 = compareVersions(RegExp[ " $1 " ], " 3.2 " ) >= 0 ;
}

}

var isIE = sUserAgent.indexOf( " compatible " ) > - 1
&& sUserAgent.indexOf( " MSIE " ) > - 1
&& ! isOpera;

var isMinIE4 = isMinIE5 = isMinIE5_5 = isMinIE6 = false ;

if (isIE) {
var reIE = new RegExp( " MSIE (//d+//.//d+); " );
reIE.test(sUserAgent);
var fIEVersion = parseFloat(RegExp[ " $1 " ]);

isMinIE4 = fIEVersion >= 4 ;
isMinIE5 = fIEVersion >= 5 ;
isMinIE5_5 = fIEVersion >= 5.5 ;
isMinIE6 = fIEVersion >= 6.0 ;
}

var isMoz = sUserAgent.indexOf( " Gecko " ) > - 1
&& ! isKHTML;

var isMinMoz1 = sMinMoz1_4 = isMinMoz1_5 = false ;

if (isMoz) {
var reMoz = new RegExp( " rv:(//d+//.//d+(?://.//d+)?) " );
reMoz.test(sUserAgent);
isMinMoz1 = compareVersions(RegExp[ " $1 " ], " 1.0 " ) >= 0 ;
isMinMoz1_4 = compareVersions(RegExp[ " $1 " ], " 1.4 " ) >= 0 ;
isMinMoz1_5 = compareVersions(RegExp[ " $1 " ], " 1.5 " ) >= 0 ;
}

var isNS4 = ! isIE && ! isOpera && ! isMoz && ! isKHTML
&& (sUserAgent.indexOf( " Mozilla " ) == 0 )
&& (navigator.appName == " Netscape " )
&& (fAppVersion >= 4.0 && fAppVersion < 5.0 );

var isMinNS4 = isMinNS4_5 = isMinNS4_7 = isMinNS4_8 = false ;

if (isNS4) {
isMinNS4 = true ;
isMinNS4_5 = fAppVersion >= 4.5 ;
isMinNS4_7 = fAppVersion >= 4.7 ;
isMinNS4_8 = fAppVersion >= 4.8 ;
}

var isWin = (navigator.platform == " Win32 " ) || (navigator.platform == " Windows " );
var isMac = (navigator.platform == " Mac68K " ) || (navigator.platform == " MacPPC " )
|| (navigator.platform == " Macintosh " );

var isUnix = (navigator.platform == " X11 " ) && ! isWin && ! isMac;

var isWin95 = isWin98 = isWinNT4 = isWin2K = isWinME = isWinXP = false ;
var isMac68K = isMacPPC = false ;
var isSunOS = isMinSunOS4 = isMinSunOS5 = isMinSunOS5_5 = false ;

if (isWin) {
isWin95 = sUserAgent.indexOf( " Win95 " ) > - 1
|| sUserAgent.indexOf( " Windows 95 " ) > - 1 ;
isWin98 = sUserAgent.indexOf( " Win98 " ) > - 1
|| sUserAgent.indexOf( " Windows 98 " ) > - 1 ;
isWinME = sUserAgent.indexOf( " Win 9x 4.90 " ) > - 1
|| sUserAgent.indexOf( " Windows ME " ) > - 1 ;
isWin2K = sUserAgent.indexOf( " Windows NT 5.0 " ) > - 1
|| sUserAgent.indexOf( " Windows 2000 " ) > - 1 ;
isWinXP = sUserAgent.indexOf( " Windows NT 5.1 " ) > - 1
|| sUserAgent.indexOf( " Windows XP " ) > - 1 ;
isWinNT4 = sUserAgent.indexOf( " WinNT " ) > - 1
|| sUserAgent.indexOf( " Windows NT " ) > - 1
|| sUserAgent.indexOf( " WinNT4.0 " ) > - 1
|| sUserAgent.indexOf( " Windows NT 4.0 " ) > - 1
&& ( ! isWinME && ! isWin2K && ! isWinXP);
}

if (isMac) {
isMac68K = sUserAgent.indexOf( " Mac_68000 " ) > - 1
|| sUserAgent.indexOf( " 68K " ) > - 1 ;
isMacPPC = sUserAgent.indexOf( " Mac_PowerPC " ) > - 1
|| sUserAgent.indexOf( " PPC " ) > - 1 ;
}

if (isUnix) {
isSunOS = sUserAgent.indexOf( " SunOS " ) > - 1 ;

if (isSunOS) {
var reSunOS = new RegExp( " SunOS (//d+//.//d+(?://.//d+)?) " );
reSunOS.test(sUserAgent);
isMinSunOS4 = compareVersions(RegExp[ " $1 " ], " 4.0 " ) >= 0 ;
isMinSunOS5 = compareVersions(RegExp[ " $1 " ], " 5.0 " ) >= 0 ;
isMinSunOS5_5 = compareVersions(RegExp[ " $1 " ], " 5.5 " ) >= 0 ;
}
}