最近一直在讀《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;
????}
}

轉載于:https://www.cnblogs.com/suchenge/articles/1516672.html

總結

以上是生活随笔為你收集整理的javascript事件模型框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。