Javascript中onload載入多個函數執行個體

如果直接對winow.onload進行賦值，會覆蓋原來綁定的onload事件。如何能多次綁定了，有下面三種方法
1、將要綁定的事件寫在一塊，然後對onload進行賦值

代碼如下	複製代碼
window.onload=function(){function1();function2();}

2、通過自訂addLoadEvent來解決

代碼如下	複製代碼
function addLoadEvent(func){ var oldonload=window.onload; if(typeof window.onload!=’function’){ window.onload=func; }else{ window.onload=function(){ oldonload(); func(); } } }

添加要載入執行的事件:

代碼如下	複製代碼
addLoadEvent(func1); addLoadEvent(func2);

3、要想在你的程式中給一個事件指派多個處理過程的話，只要首先判斷一下瀏覽器，然後根據不同的瀏覽器，選擇使用 attachEvent 還是 addEventListener 就可以了。執行個體如下

代碼如下	複製代碼
if (document.all) { window.attachEvent(‘onload’, func1); window.attachEvent(‘onload’, func2); } else { window.addEventListener(‘load’, func1, false); window.addEventListener(‘load’, func2, false); }

除了上面方法還有沒有其它辦法呢

用法如下：

代碼如下	複製代碼
function func(){alert("this is window onload event!");return;} window.onload=func; 或者如下： window.onload=function(){alert("this is window onload event!");return;}

但window.onload 不能同時載入多個函數。

比如：

代碼如下	複製代碼
function t(){ alert("t") } function b(){ alert("b") } window.onload =t ; window.onload =b ;

後面會把前面的覆蓋，上面代碼只會輸出 b。
此時可用如下方法解決：

代碼如下	複製代碼
window.onload =function() { t();  b(); }

另一種解決辦法

代碼

代碼如下

複製代碼

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> function addLoadEvent(func) {   var oldonload = window.onload;//得到上一個onload事件的函數   if (typeof window.onload != 'function') {//判斷類型是否為'function',注意typeof返回的是字串     window.onload = func;   } else {      window.onload = function() {       oldonload();//調用之前覆蓋的onload事件的函數---->由於我對js瞭解不多,這裡我暫時理解為通過覆蓋onload事件的函數來實現載入多個函數       func();//調用當前事件函數     }   } } //(完整樣本)使用如下： function t(){ alert("t") } function b(){ alert("b") } function c(){ alert("c") }  function addLoadEvent(func) {   var oldonload = window.onload;   if (typeof window.onload != 'function') {     window.onload = func;   } else {      window.onload = function() {       oldonload();       func();     }   } } addLoadEvent(t); addLoadEvent(b); addLoadEvent(c); //等價於  window.onload =function() { t();  b(); c() ;}

個人以為直接使用隱式函數(如：window.onload =function() { t();  b(); c() ;})更快捷，當然使用 addLoadEvent 更professional，各取所好吧！

執行多個window.onload產生too much recursion錯誤

，通用的解決方案如下：

代碼如下	複製代碼
<script type="text/javascript"> var func = window.onload; window.onload = function(){     func ? func() : 0;     alert(1); } </script>

 

這樣的原理就是把window.onload事件一級一級傳遞，保證每一個window.onload事件能執行，但如果出現多次調用而且變數名一樣，就會產生too much recursion錯誤，如下

代碼如下	複製代碼
<script type="text/javascript"> var func = window.onload; window.onload = function(){     func ? func() : 0;     alert(1); }   func = window.onload; window.onload = function(){     func ? func() : 0;     alert(2); } </script>

 

上面實現執行兩個window.onload事件，但由於每次傳遞window.onload事件定義為相同的變數名，就會產生too much recursion錯誤。

解決方案
由於產生的原因是因為定義為相同的變數名產生迴圈執行代碼，因此解決方案只需要把變數名定義不同即可解決。如下

代碼如下	複製代碼
<script type="text/javascript"> var func = window.onload; window.onload = function(){     func ? func() : 0;     alert(1); }   func1 = window.onload; window.onload = function(){     func1 ? func1() : 0;     alert(2); } </script>

 

Web頁面如果出現多次window.onload事件，盡量能合併作業處理，或實作類別似於jQuery的ready事件機制，解決冗餘代碼問題，提高代碼的可讀性。

更多詳細內容請查看：http://www.111cn.net/wy/js-ajax/too-much-recursion.htm