把多个JavaScript函数绑定到onload事件处理函数上

在HTML文档完成加载之前，DOM是不完整的。网页加载完毕时会触发一个onload事件，这个事件与window对象相关联。如：

widow.onload = prepareGallery;

 

假设我有两个函数：firstFunction()和secondFunction()。如果把它们逐一绑定到onload事件上，他们当中将只有最后那个才会被实际执行：

widow.onload = firstFunction;
widow.onload = secondFunction;

 由此得出一个结论：每个事件处理函数只能绑定一条指令。

 

 小技巧-可以创建一个匿名函数来容纳这两个函数，然后把那个匿名函数绑定到onload事件上:

widow.onload = function(){
　　firstFunction();
　　secondFunction();
}

 

还有一个更通用的解决方案-不管你打算在页面加载完毕执行多少个函数，它都可以应付自如。这个函数的名字是addLoadEvent，它只有一个参数，打算在页面加载完毕时执行的函数的名字。

下面是addLoadEvent()函数代码清单：

function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

 

这相当于把那些将在页面加载完毕时执行的函数创建为一个队列。如果想把刚才那两个函数添加到这个队列里去，只需写出以下代码就行了：

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

无论打算在页面加载完毕执行多少个函数，都只要多写一条语句就可以了。