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

addLoadEvent方法解析