addLoadEvent方法解析
addLoadEvent方法解析
onload方法在网页加载完毕时，会自动执行，但是该方法有个缺点就是只能执行一个方法。
onload的限制
比如下面的代码：
<script type="text/javascript">
function func1(){
console.log("this is func1()");
}
function func2(){
console.log("this is func2()");
}
window.onload = func1;
window.onload = func2;
</script>执行结果如下：
只有第二个方法被执行。
那么如何才能在页面加载完成后，执行多个方法呢？
可以采用addLoadEvent方法，这个方法是由其他人编写的，所以不是DOM里面的方法，如果使用直接复制下面这段代码就可以了！
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
console.log("addLoadEvent第一次执行！");
window.onload = func;
}else{
console.log("addLoadEvent多次执行！");
window.onload = function(){
oldonload();
func();
}
}
}有了这段代码，就可以给onload绑定多个方法：
function func1(){
console.log("this is func1()");
}
function func2(){
console.log("this is func2()");
}
addLoadEvent(func1);
addLoadEvent(func2);原理如同：
window.onload = function(){
func1();
func2();
}下面看一下执行的结果：
完美达到目的！
代码解析
虽然只有几行代码，但是第一次接触的时候，难免晕头转向！
仔细阅读下面的代码：
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
console.log("addLoadEvent第一次执行！");
window.onload = func;
}else{
console.log("addLoadEvent多次执行！");
window.onload = function(){
oldonload();
func();
}
}
}这个方法需要一个参数func，就是传入的方法名称。
当我们使用一次addLoadEvent的时候，就相当于调用window.onload = func1;
此时window.onload应该是null，因此判断语句typeof window.onload != 'function' 就会返回true.
执行后，可以看到window.onload方法变成了func1：
再次调用addLoadEvent时，进入else的部分。把func2与原来的oldonload方法一同绑定成新的方法。
执行后，看到window.onload方法变成如下的样子：
以此类推，当有多个方法时，就会构造出如下的方法：
window.onload = function(){
func1();
func2();
...
func10000();
}这样就可以在onload时，绑定多个方法了。
总结起来，该方法就是把 所有想要在onload时期执行的方法 构造成一个 方法的执行对列 ，然后使用onload执行这个 队列方法 。
参考
【1】addLoadEvent(func)详解：http://www.cnblogs.com/joyan/archive/2010/06/29/1767577.html
【2】脚本之家addLoadEvent说明：http://www.jb51.net/article/21707.htm
腾讯云开发者
