最近一直在读《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;
}
}
//
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; }}
文章转自庄周梦蝶 ，原文发布时间5.16
