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