下面四个函数就是其中的一部分。
首先我们要添加一段浏览器检测脚本：
复制代码 代码如下:
/************************************
* 检测浏览器
***********************************/
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 browser.ie6 = v }
一) 添加事件绑定 bind()
这个想必大家都已知道。ie 的事件绑定函数是 attachevent；而 firefox, safari 是 addeventlistener；opera 则两种都支持。下面进行封装。
复制代码 代码如下:
/************************************
* 添加事件绑定
* @param obj : 要绑定事件的元素
* @param type : 事件名称。不加 on. 如 : click 而不是 onclick.
* @param fn : 事件处理函数
************************************/
function bind( obj, type, fn ) {
if ( obj.attachevent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachevent( 'on'+type, obj[type+fn] );
} else
obj.addeventlistener( type, fn, false );
}
例如添加一个页面点击事件：
bind(document, click, function() {
alert(hello, world!!);
});
二) 删除事件绑定 unbind()
和 bind() 函数参数相同，功能相反。
复制代码 代码如下:
/************************************
* 删除事件绑定
* @param obj : 要删除事件的元素
* @param type : 事件名称。不加 on. 如 : click 而不是 onclick
* @param fn : 事件处理函数
************************************/
function unbind( obj, type, fn ) {
if ( obj.detachevent ) {
obj.detachevent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeeventlistener( type, fn, false );
}
三) 获取元素的计算样式
计算样式也叫最终样式，也就是元素最终呈现出来的样式。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_this.list[i]();
}
})();
}
例如：
复制代码 代码如下:
domready(function(){
alert(dom 加载完毕！);
});