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