javascript页面加载与事件监听函数

在javascript编程中，经常需要设置页面加载函数和事件监听函数，为了便于广泛编程和屏蔽浏览器差异，有牛人对这种需求进行了封装，实现了更高抽象的函数。

一:页面加载函数

假设要在页面onload事件中添加两个函数f1和f2.如果这么写window.onload=f1;window.onload=f2.那么这个事件只能触发一个函数(后面的那个)。如何才能添加两个呢？可以这样

window.onload = function(){
f1();
f2();
}

但是这样写不能跨浏览器，并且也不能让人觉得非常专业。于是便有了下面非常牛X的方式

var baseLib = {//基础类库函数，用于实现添加页面加载函数
                addLoadListener:function(fn){
                    if (typeof window.addEventListener != 'undefined'){
                        window.addEventListener('load', fn, false);
                    }else if (typeof document.addEventListener != 'undefined'){
                        document.addEventListener('load', fn, false);
                    }else if (typeof window.attachEvent != 'undefined'){
                        window.attachEvent('onload', fn);
                    }else{
                        var oldfn = window.onload;
                        if (typeof window.onload != 'function')    window.onload = fn;
                        else{
                            window.onload = function(){
                                oldfn();
                                fn();
                            };
                        }
                    }
                }
            }

如果需要将某个函数添加到页面加载事件中只需要：

baseLib.addLoadListener(f1);
baseLib.addLoadListener(f2);
baseLib.addLoadListener(function(){
alert("gagagaga");
});

这样在任何需要添加的时候只需要调用baseLib.addLoadListener()函数即可。

二，注册事件监听函数

之前曾经提到过，要给某个DOM节点注册事件监听方式有这样两种：

1.直接在节点上注明属性，如<div id="container" onclick="show()">

2.代码注册监听，如document.getElementById('container').onclick = show;

现在要介绍一种值得向别人炫耀的方式来实现事件监听：

var baseLib = {//基础类库函数，用于实现添加页面加载函数
addEventListener:function(target, eventType, functionRef, capture){
if (typeof target.addEventListener != 'undefined')target.addEventListener(eventType, functionRef, capture);
else if (typeof target.attachEvent != 'undefined')target.attachEvent('on' + eventType, functionRef);
else{
eventType = 'on' + eventType;
if (typeof target[eventType] == 'function'){
var oldListener = target[eventType];
target[eventType] = function(){
oldListener();
return functionRef();
}
}else target[eventType] = functionRef;
}
return true;
}
}

说明：参数一target：需要注册事件监听的DOM节点
参数二eventType：事件类型，如load,click

参数三functionRef:需要注册的函数名

参数四capture:bool值，不知道什么意思

例如，要给页面的单击事件注册一个函数，可以这样写代码

baseLib.addEventListener(document,"click",clickFn,false);这样在页面上单击的时候就会触发clickFn函数