addLoadEvent:共享onload事件。

读jeremy Keitf写的一本《JavaScript DOM编程艺术》看到这一节。

众所周知，有时候我们执行需要检测DOM元素的JS函数的时候，如果DOM没加载完整，该函数是无法执行成功的。

类似的函数应该在网页加载完毕之后立刻执行。

网页加载完毕时会触发一个onload事件，这个时间与window对象相关联。

那么我们可以定义函数绑定到这个事件上：

[html]  view plain copy

1. window.onload= Function;  

这个能解决问题，但是如果我们有多个函数都需要在页面加载时得到执行，那应该怎么办？

如果把它们注意绑定到onload事件上，它们当中将只有最后那个才会被实际执行：

[html]  view plain copy

1. window.onload = firstFunction;  
2. window.onload = secondFunction;  

secondFunction 将取代firstFunction。

你可能会想：每个事件处理函数只能绑定一条指令。有一种办法可以让我避过这一难题：可以先创建一个匿名函数来容纳这两个函数，然后把那个年匿名函数绑定到onload事件上。如下所示：

[html]  view plain copy

1. window.onload = function(){  
2.     fistFunction();  
3.     secondFunction();  
4. };  

它确实能很好地工作，在需要绑定的函数不是很多的场合，这应该是最简单的解决方案。

这里还有一种弹性最佳的解决方案，不管你打算在页面加载完毕时执行多少个函数，它都能应付自如。这个方案需要额外编写一些代码，但好处是一旦有了那些代码，把函数绑定到window.onload事件就非常易行了。

这个函数的名字是addLoadEvent，它是由Simon Willison(详见http://simon.incutio.com) 写的。它只有一个参数：打算在页面加载完毕时执行的函数的名字。

下面是addLoadEvent函数将要完成的操作。

1，把现有的window.onload事件处理函数的值存入变量oldonload。

2，如果在这个处理函数上还没有绑定任何函数，就像平常那样把新函数添加给它。

3，如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾。

下面是addLoadEvent函数的代码清单。

[html]  view plain copy

1. function addLoadEvent(func){  
2.     var oldonload = window.onload;  
3.     if (typeof window.onload !='function') {  
4.         window.onload= func;  
5.     }else{window.onload=function(){  
6.         oldonload();  
7.         func();  
8.         }  
9.     };  
10. };  

代码很好理解。

名称为addLoadEvent,把你需要绑定window.onload的函数作为参数func传递。

然后定义window.onload为变量oldonload。

判断之前有没有函数绑定window.onload事件。用typeof来判断window.onload类型。

如果typeof window.onload的类型不为'function'，则说明没有函数绑定在window.onload事件上。

那么你需要绑定的函数则通过参数func赋值给window.onload。等同于上文提到的

[html]  view plain copy

1. window.onload= Function;  

如果window.onload的类型为‘function’，那么就说明有函数绑定在window.onload事件上，则追加新函数到window.onload上。等同于上文的

[html]  view plain copy

1. window.onload = function(){  
2.     fistFunction();  
3.     secondFunction();  
4. };  

之后在js文件中调用这个函数就好了。addLoadEvent(yourFunctionName)。

至此，大功告成。