閱讀880 返回首頁    go 阿裏雲 go 技術社區[雲棲]


javascript事件模型框架

最近一直在讀《javascript高級程序設計》,也快讀完了,讀到事件這一章,書中提供的一個事件工具類很實用,我注釋了一下,並摘記:

None.gif//eventutil.js
None.gif
var EventUtil = new Object;
ExpandedBlockStart.gifContractedBlock.gif
/**//* 
InBlock.gif  此方法用來給特定對象添加事件,oTarget是指定對象,sEventType是事件類型,如click、keydown等,    fnHandler是事件回調函數
InBlock.gif/*
InBlock.gifEventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
InBlock.gif    //firefox情況下
InBlock.gif    if (oTarget.addEventListener) {
InBlock.gif        oTarget.addEventListener(sEventType, fnHandler, false);
InBlock.gif    }
InBlock.gif    //IE下
InBlock.gif    else if (oTarget.attachEvent) {
InBlock.gif        oTarget.attachEvent("on" + sEventType, fnHandler);
InBlock.gif    }
InBlock.gif    else {
InBlock.gif        oTarget["on" + sEventType] = fnHandler;
InBlock.gif    }
InBlock.gif};
InBlock.gif/* 
InBlock.gif  此方法用來移除特定對象的特定事件,oTarget是指定對象,sEventType是事件類型,如click、keydown等,fnHandler是事件回調函數
InBlock.gif/*       
InBlock.gifEventUtil.removeEventHandler = function (oTarget, sEventType, fnHandler) {
InBlock.gif    if (oTarget.removeEventListener) {
InBlock.gif        oTarget.removeEventListener(sEventType, fnHandler, false);
InBlock.gif    } else if (oTarget.detachEvent) {
InBlock.gif        oTarget.detachEvent("on" + sEventType, fnHandler);
InBlock.gif    } else { 
InBlock.gif        oTarget["on" + sEventType] = null;
InBlock.gif    }
InBlock.gif};
InBlock.gif
InBlock.gif/*
InBlock.gif 格式化事件,因為IE和其他瀏覽器下獲取事件的方式不同並且事件的屬性也不盡相同,通過此方法提供一個一致的事件
ExpandedBlockEnd.gif
*/

ExpandedBlockStart.gifContractedBlock.gifEventUtil.formatEvent 
= function (oEvent) dot.gif{
InBlock.gif    
//isIE和isWin引用到一個js文件,判斷瀏覽器和操作係統類型
ExpandedSubBlockStart.gifContractedSubBlock.gif
    if (isIE && isWin) dot.gif{
InBlock.gif        oEvent.charCode 
= (oEvent.type == "keypress"? oEvent.keyCode : 0;
InBlock.gif        
//IE隻支持冒泡,不支持捕獲
InBlock.gif
        oEvent.eventPhase = 2;
InBlock.gif        oEvent.isChar 
= (oEvent.charCode > 0);
InBlock.gif        oEvent.pageX 
= oEvent.clientX + document.body.scrollLeft;
InBlock.gif        oEvent.pageY 
= oEvent.clientY + document.body.scrollTop;
InBlock.gif        
//阻止事件的默認行為
ExpandedSubBlockStart.gifContractedSubBlock.gif
        oEvent.preventDefault = function () dot.gif{
InBlock.gif            
this.returnValue = false;
ExpandedSubBlockEnd.gif        }
;
InBlock.gif
InBlock.gif         
//將toElement,fromElement轉化為標準的relatedTarget 
ExpandedSubBlockStart.gifContractedSubBlock.gif
        if (oEvent.type == "mouseout"dot.gif{
InBlock.gif            oEvent.relatedTarget 
= oEvent.toElement;
ExpandedSubBlockStart.gifContractedSubBlock.gif        }
 else if (oEvent.type == "mouseover"dot.gif{
InBlock.gif            oEvent.relatedTarget 
= oEvent.fromElement;
ExpandedSubBlockEnd.gif        }

InBlock.gif        
//取消冒泡      
ExpandedSubBlockStart.gifContractedSubBlock.gif
        oEvent.stopPropagation = function () dot.gif{
InBlock.gif            
this.cancelBubble = true;
ExpandedSubBlockEnd.gif        }
;
InBlock.gif
InBlock.gif        oEvent.target 
= oEvent.srcElement;
InBlock.gif        
//添加事件發生時間屬性,IE沒有
InBlock.gif
        oEvent.time = (new Date).getTime();
ExpandedSubBlockEnd.gif    }

InBlock.gif    
return oEvent;
ExpandedBlockEnd.gif}
;
None.gif
ExpandedBlockStart.gifContractedBlock.gifEventUtil.getEvent 
= function() dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif    
if (window.event) dot.gif{
InBlock.gif        
//格式化IE的事件
InBlock.gif
        return this.formatEvent(window.event);
ExpandedSubBlockStart.gifContractedSubBlock.gif    }
 else dot.gif{
InBlock.gif        
return EventUtil.getEvent.caller.arguments[0];
ExpandedSubBlockEnd.gif    }

ExpandedBlockEnd.gif}
;
None.gif


附帶上一個判斷瀏覽器和係統類型的js文件,通過引入一些名字顯而易見的全局變量作為判斷的結果,使用時需要小心變量名稱衝突:
None.gif//detect.js,同樣來自《JAVASCRIPT高級程序設計》
None.gif
var sUserAgent = navigator.userAgent;
None.gif
var fAppVersion = parseFloat(navigator.appVersion);
None.gif
ExpandedBlockStart.gifContractedBlock.gif
function compareVersions(sVersion1, sVersion2) dot.gif{
InBlock.gif
InBlock.gif    
var aVersion1 = sVersion1.split(".");
InBlock.gif    
var aVersion2 = sVersion2.split(".");
InBlock.gif    
ExpandedSubBlockStart.gifContractedSubBlock.gif    
if (aVersion1.length > aVersion2.length) dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif        
for (var i=0; i < aVersion1.length - aVersion2.length; i++dot.gif{
InBlock.gif            aVersion2.push(
"0");
ExpandedSubBlockEnd.gif        }

ExpandedSubBlockStart.gifContractedSubBlock.gif    }
 else if (aVersion1.length < aVersion2.length) dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif        
for (var i=0; i < aVersion2.length - aVersion1.length; i++dot.gif{
InBlock.gif            aVersion1.push(
"0");
ExpandedSubBlockEnd.gif        }
    
ExpandedSubBlockEnd.gif    }

InBlock.gif    
ExpandedSubBlockStart.gifContractedSubBlock.gif    
for (var i=0; i < aVersion1.length; i++dot.gif{
InBlock.gif 
ExpandedSubBlockStart.gifContractedSubBlock.gif        
if (aVersion1[i] < aVersion2[i]) dot.gif{
InBlock.gif            
return -1;
ExpandedSubBlockStart.gifContractedSubBlock.gif        }
 else if (aVersion1[i] > aVersion2[i]) dot.gif{
InBlock.gif            
return 1;
ExpandedSubBlockEnd.gif        }
    
ExpandedSubBlockEnd.gif    }

InBlock.gif    
InBlock.gif    
return 0;
InBlock.gif
ExpandedBlockEnd.gif}

None.gif
None.gif
var isOpera = sUserAgent.indexOf("Opera"> -1;
None.gif
var isMinOpera4 = isMinOpera5 = isMinOpera6 = isMinOpera7 = isMinOpera7_5 = false;
None.gif
ExpandedBlockStart.gifContractedBlock.gif
if (isOpera) dot.gif{
InBlock.gif    
var fOperaVersion;
ExpandedSubBlockStart.gifContractedSubBlock.gif    
if(navigator.appName == "Opera"dot.gif{
InBlock.gif        fOperaVersion 
= fAppVersion;
ExpandedSubBlockStart.gifContractedSubBlock.gif    }
 else dot.gif{
InBlock.gif        
var reOperaVersion = new RegExp("Opera (//d+//.//d+)");
InBlock.gif        reOperaVersion.test(sUserAgent);
InBlock.gif        fOperaVersion 
= parseFloat(RegExp["$1"]);
ExpandedSubBlockEnd.gif    }

InBlock.gif
InBlock.gif    isMinOpera4 
= fOperaVersion >= 4;
InBlock.gif    isMinOpera5 
= fOperaVersion >= 5;
InBlock.gif    isMinOpera6 
= fOperaVersion >= 6;
InBlock.gif    isMinOpera7 
= fOperaVersion >= 7;
InBlock.gif    isMinOpera7_5 
= fOperaVersion >= 7.5;
ExpandedBlockEnd.gif}

None.gif
None.gif
var isKHTML = sUserAgent.indexOf("KHTML"> -1 
None.gif              
|| sUserAgent.indexOf("Konqueror"> -1 
None.gif              
|| sUserAgent.indexOf("AppleWebKit"> -1
None.gif              
None.gif
var isMinSafari1 = isMinSafari1_2 = false;
None.gif
var isMinKonq2_2 = isMinKonq3 = isMinKonq3_1 = isMinKonq3_2 = false;
None.gif
ExpandedBlockStart.gifContractedBlock.gif
if (isKHTML) dot.gif{
InBlock.gif    isSafari 
= sUserAgent.indexOf("AppleWebKit"> -1;
InBlock.gif    isKonq 
= sUserAgent.indexOf("Konqueror"> -1;
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif    
if (isSafari) dot.gif{
InBlock.gif        
var reAppleWebKit = new RegExp("AppleWebKit///(//d+(?://.//d*)?)");
InBlock.gif        reAppleWebKit.test(sUserAgent);
InBlock.gif        
var fAppleWebKitVersion = parseFloat(RegExp["$1"]);
InBlock.gif
InBlock.gif        isMinSafari1 
= fAppleWebKitVersion >= 85;
InBlock.gif        isMinSafari1_2 
= fAppleWebKitVersion >= 124;
ExpandedSubBlockStart.gifContractedSubBlock.gif    }
 else if (isKonq) dot.gif{
InBlock.gif
InBlock.gif        
var reKonq = new RegExp("Konqueror///(//d+(?://.//d+(?://.//d)?)?)");
InBlock.gif        reKonq.test(sUserAgent);
InBlock.gif        isMinKonq2_2 
= compareVersions(RegExp["$1"], "2.2">= 0;
InBlock.gif        isMinKonq3 
= compareVersions(RegExp["$1"], "3.0">= 0;
InBlock.gif        isMinKonq3_1 
= compareVersions(RegExp["$1"], "3.1">= 0;
InBlock.gif        isMinKonq3_2 
= compareVersions(RegExp["$1"], "3.2">= 0;
ExpandedSubBlockEnd.gif    }
 
InBlock.gif    
ExpandedBlockEnd.gif}

None.gif
None.gif
var isIE = sUserAgent.indexOf("compatible"> -1 
None.gif           
&& sUserAgent.indexOf("MSIE"> -1
None.gif           
&& !isOpera;
None.gif           
None.gif
var isMinIE4 = isMinIE5 = isMinIE5_5 = isMinIE6 = false;
None.gif
ExpandedBlockStart.gifContractedBlock.gif
if (isIE) dot.gif{
InBlock.gif    
var reIE = new RegExp("MSIE (//d+//.//d+);");
InBlock.gif    reIE.test(sUserAgent);
InBlock.gif    
var fIEVersion = parseFloat(RegExp["$1"]);
InBlock.gif
InBlock.gif    isMinIE4 
= fIEVersion >= 4;
InBlock.gif    isMinIE5 
= fIEVersion >= 5;
InBlock.gif    isMinIE5_5 
= fIEVersion >= 5.5;
InBlock.gif    isMinIE6 
= fIEVersion >= 6.0;
ExpandedBlockEnd.gif}

None.gif
None.gif
var isMoz = sUserAgent.indexOf("Gecko"> -1
None.gif            
&& !isKHTML;
None.gif
None.gif
var isMinMoz1 = sMinMoz1_4 = isMinMoz1_5 = false;
None.gif
ExpandedBlockStart.gifContractedBlock.gif
if (isMoz) dot.gif{
InBlock.gif    
var reMoz = new RegExp("rv:(//d+//.//d+(?://.//d+)?)");
InBlock.gif    reMoz.test(sUserAgent);
InBlock.gif    isMinMoz1 
= compareVersions(RegExp["$1"], "1.0">= 0;
InBlock.gif    isMinMoz1_4 
= compareVersions(RegExp["$1"], "1.4">= 0;
InBlock.gif    isMinMoz1_5 
= compareVersions(RegExp["$1"], "1.5">= 0;
ExpandedBlockEnd.gif}

None.gif
None.gif
var isNS4 = !isIE && !isOpera && !isMoz && !isKHTML 
None.gif            
&& (sUserAgent.indexOf("Mozilla"== 0
None.gif            
&& (navigator.appName == "Netscape"
None.gif            
&& (fAppVersion >= 4.0 && fAppVersion < 5.0);
None.gif
None.gif
var isMinNS4 = isMinNS4_5 = isMinNS4_7 = isMinNS4_8 = false;
None.gif
ExpandedBlockStart.gifContractedBlock.gif
if (isNS4) dot.gif{
InBlock.gif    isMinNS4 
= true;
InBlock.gif    isMinNS4_5 
= fAppVersion >= 4.5;
InBlock.gif    isMinNS4_7 
= fAppVersion >= 4.7;
InBlock.gif    isMinNS4_8 
= fAppVersion >= 4.8;
ExpandedBlockEnd.gif}

None.gif
None.gif
var isWin = (navigator.platform == "Win32"|| (navigator.platform == "Windows");
None.gif
var isMac = (navigator.platform == "Mac68K"|| (navigator.platform == "MacPPC"
None.gif            
|| (navigator.platform == "Macintosh");
None.gif
None.gif
var isUnix = (navigator.platform == "X11"&& !isWin && !isMac;
None.gif
None.gif
var isWin95 = isWin98 = isWinNT4 = isWin2K = isWinME = isWinXP = false;
None.gif
var isMac68K = isMacPPC = false;
None.gif
var isSunOS = isMinSunOS4 = isMinSunOS5 = isMinSunOS5_5 = false;
None.gif
ExpandedBlockStart.gifContractedBlock.gif
if (isWin) dot.gif{
InBlock.gif    isWin95 
= sUserAgent.indexOf("Win95"> -1 
InBlock.gif              
|| sUserAgent.indexOf("Windows 95"> -1;
InBlock.gif    isWin98 
= sUserAgent.indexOf("Win98"> -1 
InBlock.gif              
|| sUserAgent.indexOf("Windows 98"> -1;
InBlock.gif    isWinME 
= sUserAgent.indexOf("Win 9x 4.90"> -1 
InBlock.gif              
|| sUserAgent.indexOf("Windows ME"> -1;
InBlock.gif    isWin2K 
= sUserAgent.indexOf("Windows NT 5.0"> -1 
InBlock.gif              
|| sUserAgent.indexOf("Windows 2000"> -1;
InBlock.gif    isWinXP 
= sUserAgent.indexOf("Windows NT 5.1"> -1 
InBlock.gif              
|| sUserAgent.indexOf("Windows XP"> -1;
InBlock.gif    isWinNT4 
= sUserAgent.indexOf("WinNT"> -1 
InBlock.gif              
|| sUserAgent.indexOf("Windows NT"> -1 
InBlock.gif              
|| sUserAgent.indexOf("WinNT4.0"> -1 
InBlock.gif              
|| sUserAgent.indexOf("Windows NT 4.0"> -1 
InBlock.gif              
&& (!isWinME && !isWin2K && !isWinXP);
ExpandedBlockEnd.gif}
 
None.gif
ExpandedBlockStart.gifContractedBlock.gif
if (isMac) dot.gif{
InBlock.gif    isMac68K 
= sUserAgent.indexOf("Mac_68000"> -1 
InBlock.gif               
|| sUserAgent.indexOf("68K"> -1;
InBlock.gif    isMacPPC 
= sUserAgent.indexOf("Mac_PowerPC"> -1 
InBlock.gif               
|| sUserAgent.indexOf("PPC"> -1;  
ExpandedBlockEnd.gif}

None.gif
ExpandedBlockStart.gifContractedBlock.gif
if (isUnix) dot.gif{
InBlock.gif    isSunOS 
= sUserAgent.indexOf("SunOS"> -1;
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif    
if (isSunOS) dot.gif{
InBlock.gif        
var reSunOS = new RegExp("SunOS (//d+//.//d+(?://.//d+)?)");
InBlock.gif        reSunOS.test(sUserAgent);
InBlock.gif        isMinSunOS4 
= compareVersions(RegExp["$1"], "4.0">= 0;
InBlock.gif        isMinSunOS5 
= compareVersions(RegExp["$1"], "5.0">= 0;
InBlock.gif        isMinSunOS5_5 
= compareVersions(RegExp["$1"], "5.5">= 0;
ExpandedSubBlockEnd.gif    }

ExpandedBlockEnd.gif}
文章轉自莊周夢蝶  ,原文發布時間5.17

最後更新:2017-05-17 11:03:57

  上一篇:go  快訊 | 清華-青島數據科學研究院成立二維碼安全技術研究中心
  下一篇:go  為你的ROR應用安裝FCKEditor