4个跨浏览器必备的函数

文章来自：http://www.cssbaby.com/archives/229

如果你的项目要用到 JavaScript，而你不使用任何 JavaScript 框架，那么对于那些常用且各个浏览器明显不同的地方就需要用函数来封装起来。
下面四个函数就是其中的一部分。

首先我们要添加一段浏览器检测脚本：

/************************************
 * 检测浏览器
 ***********************************/
var user = navigator.userAgent;
var browser = {};
browser.opera = user.indexOf("Opera") > -1 && typeof window.opera == "object";
browser.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit") > -1 || user.indexOf("Konqueror") > -1) && !browser.opera;browser.ie = user.indexOf("MSIE") > -1 && !browser.opera;
browser.gecko = user.indexOf("Gecko") > -1 && !browser.khtml;
if ( browser.ie ) {
    var ie_reg = /MSIE (/d+/./d+);/;
    ie_reg.test(user);
    var v = parseFloat(RegExp["$1"]);
    browser.ie55 = v <= 5.5;
    browser.ie6 = v <= 6;
}


一) 添加事件绑定 bind()

这个想必大家都已知道。IE 的事件绑定函数是 attachEvent；而 Firefox, Safari 是 addEventListener；Opera 则两种都支持。下面进行封装。

/************************************
 * 添加事件绑定
 * @param element   : 要绑定事件的元素
 * @param eventName : 事件名称。不加 "on". 如 : "click" 而不是 "onclick".
 * @param handle    : 事件处理函数
 ************************************/
function bind(element, eventName, handle) {
    // 先检测参数
    if ( typeof element != "object" || typeof eventName != "string"
    || eventName == "" || typeof handle != "function" )
        return false;
    if ( typeof element.attachEvent != "undefined") { // IE, Opera
        element.attachEvent("on" + eventName, handle);
    } else if ( typeof element.addEventListener == "function" ) {
        // Firefox, Netscape, Safari, Chrome
        element.addEventListener(eventName, handle, false);
    } else { // 0 级 DOM 事件
        if ( typeof element["on" + eventName] == "function" ) { // 已经有事件
            var oldFunction = element["on" + eventName];
            element["on" + eventName] = function() {
                oldFunction();
                return handle();
            };
        } else { // 没有事件
            element["on" + eventName] = handle;
        }
    }
}


例如添加一个页面点击事件：

bind(document, "click", function() {
    alert("Hello, World!!");
});

二) 删除事件绑定 unbind()

和 bind() 函数参数相同，功能相反。

/************************************
 * 删除事件绑定
 * @param element : 要删除事件的元素
 * @param eventName : 事件名称。不加 "on". 如 : "click" 而不是 "onclick"
 * @param handle : 事件处理函数
 ************************************/
function unbind(element, eventName, handle) {
    // 先检测参数
    if ( typeof element != "object" || typeof eventName != "string" ||
    eventName == "" || typeof handle != "function" )
        return false;
    if ( typeof element.detachEvent != "undefined" ) {
        element.detachEvent("on" + eventName,handle);
    } else if ( typeof element.removeEventListener != "undefined" ) {
        element.removeEventListener(eventName, handle, false);
    } else {
        element["on" + eventName] = null;
    }
}

三) 获取元素的计算样式

计算样式也叫最终样式，也就是元素最终呈现出来的样式。IE 用的是元素的 currentStyle 属性，而其他浏览器则是标准的 document.defaultView.getComputedStyle() 方法。

/************************************
 * 返回元素的计算样式
 * @param element : 元素
 * @param key : 样式名称(骆驼)
 ************************************/
function getStyle(element, key) {
    // 参数不正确
    if ( typeof element != "object" || typeof key != "string" || key == "" )
        return false;
    
    // 不透明度
    if( key == "opacity" ) {
        if(browser.ie) {
            var f = element.filters;
            if(f && f.length > 0 && f.alpha) {
                return (f.alpha.opacity / 100);
            }
            return 1.0;
        }
        return document.defaultView.getComputedStyle(element, null)["opacity"];
    }
 
    // 浮动
    if ( key == "float" ) {
        key = (browser.ie ? "styleFloat" : "cssFloat");
    }
    if ( typeof element.currentStyle != "undefined" ){
        return element.currentStyle[key];
    } else {
        return document.defaultView.getComputedStyle(element, null)[key];
    }
}

IE 和其他浏览器的透明度机制不一样，这里统一用 opacity 表示透明度。还有，由于 float 是 JavaScript 的保留字，所以浏览器对其进行了转义，IE 用的是 styleFloat，其他则为 cssFloat。这里统一为 float。

例如：获取透明度

var a = document.getElementById("test");
var opacity = getStyle(a, "opacity");


四) DOM 加载完毕事件绑定 domready()

domready 和 window.onload 有所不同，window.onload 是页面所有元素全部加载完毕，包括图像，视频等一些东西。而一般情况下我们不需要等那么久，而只需要 DOM 可用即可。

/************************************
 * domready
 * @param fn: 要执行的函数
 ************************************/
function domready(fn) {
    // 参数不正确
    if(typeof fn != "function")
        return false;
    if(typeof document.addEventListener == "function") { // 非 IE 浏览器
        document.addEventListener("DOMContentLoaded", fn, false);
        return;
    }
    var _this = arguments.callee;
    if(_this.ready) // 如果 DOM 已经加载完毕, 则直接执行
        return fn();
 
    if(!_this.list) // 创建一个待执行函数数组
        _this.list = [];
 
    _this.list.push(fn);
 
    if (_this.done) return; // 正在循环检测则返回
    (function() { // 循环检测
        _this.done = true;
        try {
            document.documentElement.doScroll("left");
        } catch(error) {
            setTimeout(arguments.callee, 0);
            return;
        }
        // DOM 加载完毕, 执行所有待执行函数
        _this.ready = true;
        for (var i=0, l=_this.list.length; i<l; i++) {
            _this.list[i]();
        }
    })();
}

例如：

domready(function(){
    alert("DOM 加载完毕！");
});