DOM（十四）：代理检测和事件处理（跨浏览器）

一、检测

  用于用户代理检测，检测范围包括浏览器引擎、平台、Windows、移动设备和游戏系统等

/*
*用户代理检测脚本，检测范围包括浏览器引擎、平台、Windows、移动设备和游戏系统
*/
var client = function()
{
    //呈现引擎
    var engine = {
        ie:0,           //ie
        gecko:0,    //火狐
        webkit:0,   //chrome和safari
        khtml:0,     //Linux下的Konqueror
        opera:0,     //opera
        ver:null      //完整版本号
    };
    
    //浏览器
    var browser = {
        ie:0,
        firefox:0,
        safari:0,
        konq:0,
        opera:0,
        chrome:0,
        ver:null        //具体版本号
    };

    //平台、设备和操作系统
    var system = {
        //操作系统
        win:false,
        mac:false,
        xll:false,       //UNIX

        //移动设备
        iphone:false,
        ipod:false,
        ipad:false,
        ios:false,
        android:false,
        nokiaN:false,      //诺基亚
        winMobile:false,  //windows mobile

        //游戏系统
        wii:false,          //Wii
        ps:false            //Playstation 3
    };

    //检测呈现引擎和浏览器
    var ua = navigator.userAgent;
    if(window.opera)
    {
        engine.ver = browser.ver = window.opera.version();
        engine.opera = browser.opera = parseFloat(engine.ver);
    }
    else if(/AppleWebkit\/(\S+)/.test(ua ))
    {
        engine.ver = RegExp["$1"];
        engine.webkit = parseFloat(engine.ver);

        //确定是chrome还是safari
        if(/Chrome\/(\S+)/.test(ua))
        {
            browser.ver = RegExp["$1"];
            browser.chrome = parseFloat(browser.ver);
        } 
        else if(/Version\/(\S+)/.test(ua))
        {
            browser.ver = RegExp["$1"];
            browser.safari = parseFloat(browser.ver);
        }
        else
        {
            // 近似确定版本号
            var safariVersion = 1;
            if(engine.webkit < 100)
            {
                safariVersion = 1;
            }
            else if(engine.webkit < 312)
            {
                safariVersion = 1.2;
            }
            else if(engine.webkit < 412)
            {
                safariVersion = 1.3;
            }
            else
            {
                safariVersion = 2;
            }
            browser.safari = browser.ver = safariVersion;
        }
    }
    else if(/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^; ]+)/.test(ua))
    {
        engine.ver = browser.ver = RegExp["$1"];
        engine.khtml = browser.konq = parseFloat(engine.ver);
    }
    else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua))
    {
        engine.ver = RegExp["$1"];
        engine.gecko = parseFloat(engine.ver);

        // 确定是不是FireFox
        if(/firefox\/(\S+)/test(ua))
        {
            browser.ver = RegExp["$1"];
            browser.firefox = parseFloat(engine.ver);
        }
    }
    else if(/MISE ([^; ]+)/.test(ua))
    {
        engine.ver = browser.ver = RegExp["$1"];
        engine.ie = browser.ie = parseFloat(engine.ver);
    }    

    // 检测浏览器
    browser.ie = engine.ie;
    browser.opera = engine.opera;

    // 检测平台
    var p = navigator.platform;
    system.win = p.indexOf("Win") == 0;
    system.mac = p.indexOf("Mac") == 0;
    system.xll = (p == "xll") || (p.indexOf("Linux") == 0);

    // 检测windows操作系统
    if(system.win)
    {
        if(/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua))
        {
            if(RegExp["$1"] == "NT")
            {
                switch(RegExp["$2"])
                {
                    case "5.0":
                        system.win = "2000";
                        break;
                    case "5.1":
                        system.win = "XP";
                        break;
                    case "6.0":
                        system.win = "Vista";
                        break;
                    case "6.1":
                        system.win = "7";
                        break;
                    default:
                        system.win = "NT";
                        break;
                }
            }
            else if(RegExp["$1"] == "9x")
            {
                system.win = "ME";
            }
            else
            {
                system.win = RegExp["$1"];
            }
        }
    }

    // 移动设备
    system.iphone = ua.indexOf("iPhone") > -1;
    system.ipod = ua.indexOf("iPod") > -1;
    system.ipad = ua.indexOf("iPad") > -1;
    system.nokiaN = ua.indexOf("NokiaN") > -1;

    // windows mobile
    if(system.win == "CE")
    {
        system.winMobile = system.win;
    }
    else if(system.win == "Ph")
    {
        if(/Windows Phone OS (\d+.\d+)/.test(ua))
        {
            system.win = "Phone";
            system.winMobile = parseFloat(RegExp["$1"]);
        }
    }

    // 检测IOS版本
    if(system.mac && ua.indexOf("Mobile") > -1)
    {
        if(/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua))
        {
            system.ios = parseFloat(RegExp.$1.replace("_","."));
        }
        else
        {
            system.ios = 2;
        }
    }

    // 检测Android
    if(/Android (\d+\.\d+)/.test(ua))
    {
        system.android = parseFloat(RegExp.$1);
    }

    // 游戏系统
    system.wii = ua.indexOf("Wii") > -1;
    system.ps = /playstation/i.test(ua);

    // 返回结果
    return {
        engine:engine,
        browser:browser,
        system:system
    };
}();

二、事件的跨浏览器处理

/*
*参数：ele-->元素，type-->事件类型，不带on,handler-->事件处理程序
*/ 
var EventHandler = {
    addHandler:function(ele,type,handler){               //添加处理程序
        // DOM2级事件处理
        if(ele.addEventListener){
            ele.addEventListener(type,handler,false);
        }else if(ele.attachEvent){
            ele.attachEvent("on"+type,handler);
        }else{
            // DOM0级事件处理
            ele["on"+type] =  handler;
        }
    },
    removeHandler:function(ele,type,handler){            //删除处理程序
        if(ele.removeEventListener){
            ele.removeEventListener(type,handler,false);
        }else if(ele.detachEvent){
            ele.detachEvent("on"+type,handler);
        }else{
            ele["on"+type] =  null;
        }
    },
    getEvent:function(event){                           //获取事件对象
        return event?event:window.event;
    },
    getTarget:function(event){                          //获取事件目标
        return event.target || event.srcElement;
    },
    preventDefault:function(event){                     //阻止事件默认行为
        if(event.preventDefault){
              event.preventDefault();
        }else{
              event.returnValue = false;
        }
    },
    stopPropagation:function(event){                   //阻止事件流
        if(event.stopPropagation){
              event.stopPropagation();
        }else{
              event.cancelBubble = true;
        }
    },
    getRelatedTarget:function(event){                  //在mouseover和mouseout中获取相关元素
        if(event.relatedTarget){
              return event.relatedTarget;
        }else if(event.toElement){                     //IE8及以下版本不支持relatedTarget属性
              return event.toElement;
        }else if(event.fromElement){
              return event.fromElement;
        }else{
              return null;
        }
    }，
    getWheelDelta:function(event){                    //获取鼠标滚轮数据
        if(event.wheelDelta){                         
              return (client.engine.opera && client.engine.opera < 9.5?-event.wheelDelta:event.wheelDelta);
        }else{
              return –event.detail*40;               //针对FireFox
        } 
   },
    getCharCode:function(event){                      //获取字符编码
         if(event.charCode == “number”){
              return event.charCode;
         }else{
              return event.keyCode;
         }
   },
};

存在的不足之处敬请见谅。

原文首发：http://www.ido321.com/1403.html