window. 是指当页面加载完后执行的函数 但是这个函数有个缺点 就是不能执行多个window.onload 当第二次调用window. 第二次会覆盖第一次的函数  如下代码：

 

   
   
   
   
    
    
    
    
    
  1. <style> 
    2. 
    
    
    
    
  2. .small{ width:100px;height:100px;border:2px solid red; background:#906;}  
    3. 
    
    
    
    
  3. .big{ width:200px; height:200px;border:2px solid red; background:#906;}  
    4. 
    
    
    
    
  4. style> 
    5. 
    
    
    
    
  5. <div id="small" class="small">aaaadiv> 
    6. 
    
    
    
    
  6.     <script> 
    7. 
    
    
    
    
  7. window.onload = initAll;  
    8. 
    
    
    
    
  8.         function initAll(){  
    9. 
    
    
    
    
  9.             var oo = document.getElementById("small");  
    10. 
    
    
    
    
  10.             oo.onclick = toBig;  
    11. 
    
    
    
    
  11.             function toBig(){  
    12. 
    
    
    
    
  12.                 oo.className = "big";  
    13. 
    
    
    
    
  13.                 oo.onclick = tosmall;     
    14. 
    
    
    
    
  14.             }     
    15. 
    
    
    
    
  15.             function tosmall(){  
    16. 
    
    
    
    
  16.                 oo.className = "small";  
    17. 
    
    
    
    
  17.                 oo.onclick = toBig;   
    18. 
    
    
    
    
  18.             }  
    19. 
    
    
    
    
  19.         }  
    20. 
    
    
    
    
  20.         script> 
    21.

这上面的js代码  我是测试 一张图片时候 图片变大 当我再点击时候 图片变小类似效果！改变他们的类！但是当我底部又有一个window. 就是第二次的window. 就会覆盖第一次的 比如  都可以测试下，但是现在的问题是该怎么解决这个问题呢！恩 可以先判断下 看看上面是否已经定义了这个函数 如果定义的话 那么我让他先保存一个变量中，然后当执行下个函数时候 再去执行它！这样就可以二个函数一起执行呢！1 先判断下 如下代码：

 

   
   
   
   
    
    
    
    
    
  1.   --> 
    2.

但是如果页面上有多个这样的事件监听函数时候 我们用这种方式 也并不是很方便 我们可以先封装一个函数 然后再调用它 ！ 这个函数定义三个参数 第一个是“当前的对象obj” 第二个是"evt 事件类型",第三个是函数"fn",定于代码如下：

 

   
   
   
   
    
    
    
    
    
  1.  
    2.

综合上面的所示：

 

   
   
   
   
    
    
    
    
    
  1. > 
    2. 
    
    
    
    
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
    
    
    
    
  3. <head> 
    4. 
    
    
    
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 
    
    
    
    
  5. <title>无标题文档title> 
    6. 
    
    
    
    
  6. <style> 
    7. 
    
    
    
    
  7. .small{ width:100px;height:100px;border:2px solid red; background:#906;}  
    8. 
    
    
    
    
  8. .big{ width:200px; height:200px;border:2px solid red; background:#906;}  
    9. 
    
    
    
    
  9. style> 
    10. 
    
    
    
    
  10. <script> 
    11. 
    
    
    
    
  11. // window.onload = initAll;  
    12. 
    
    
    
    
  12.   function addEvent(obj,evt,fn){  
    13. 
    
    
    
    
  13.         //  现在要想的问题是 要给某个对象注册多次事件监听函数    
    14. 
    
    
    
    
  14.         //检测当前的事件是否存在  
    15. 
    
    
    
    
  15.         var saved;  
    16. 
    
    
    
    
  16.         if( typeof obj["on" + evt] =="function"){  
    17. 
    
    
    
    
  17.             saved = obj["on" + evt];      
    18. 
    
    
    
    
  18.         }  
    19. 
    
    
    
    
  19.         obj["on"+evt] = function(){  
    20. 
    
    
    
    
  20.             if(saved) saved();  
    21. 
    
    
    
    
  21.             fn();     
    22. 
    
    
    
    
  22.         }  
    23. 
    
    
    
    
  23.     }  
    24. 
    
    
    
    
  24. script> 
    25. 
    
    
    
    
  25.  
    26. 
    
    
    
    
  26. head> 
    27. 
    
    
    
    
  27.  
    28. 
    
    
    
    
  28. <body> 
    29. 
    
    
    
    
  29.     <div id="small" class="small">aaaadiv> 
    30. 
    
    
    
    
  30.     <script> 
    31. 
    
    
    
    
  31.         function initAll(){  
    32. 
    
    
    
    
  32.             var oo = document.getElementById("small");  
    33. 
    
    
    
    
  33.             oo.onclick = toBig;  
    34. 
    
    
    
    
  34.             function toBig(){  
    35. 
    
    
    
    
  35.                 oo.className = "big";  
    36. 
    
    
    
    
  36.                 oo.onclick = tosmall;     
    37. 
    
    
    
    
  37.             }     
    38. 
    
    
    
    
  38.             function tosmall(){  
    39. 
    
    
    
    
  39.                 oo.className = "small";  
    40. 
    
    
    
    
  40.                 oo.onclick = toBig;   
    41. 
    
    
    
    
  41.             }  
    42. 
    
    
    
    
  42.         }  
    43. 
    
    
    
    
  43.         addEvent(window,"load",initAll);  
    44. 
    
    
    
    
  44. script> 
    45. 
    
    
    
    
  45.