JS教程：addDOMLoadEvent事件

【 tulaoshi.com - Web开发 】

由于 windowonload 事件需要在页面所有内容（包括图片等）加载完后，才执行，但往往我们更希望在 DOM 一加载完就执行脚本。其实在现在大部分主流浏览器上（Firefox 3+，Opera 9+，Safari 3+，Chrome 2+）都提供了这一事件方法：。

documentaddEventListener init 

那对于 IE 我们如何模拟 addDOMLoadEvent 事件呢？

Matthias Miller 最早提供了如下的解决方案：

/*@if (@_win32)
document.write("script id=__ie_onload defer src=javascript:void(0)/script");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
    if (this.readyState == "complete") {
        init(); // call the onload handler
    }
};
/*@end @*/

而 在其后提供了一种利用 doScroll 方法来模拟 addDOMLoadEvent 事件的方案，且现在主流的 JavaScript 框架（JQuery、YUI等）基本都采用的这一解决方案。

原理基本如下：

当 ondocumentready 事件触发，文档（ document ）已经完全解析和建立。如果组件需要操作最初的文档结构，初始化代码需被安置在这之后。ondocumentready 事件告知组件，整个页面已被加载，且在 初始文档的 onload 事件触发之前立即触发。

一些方法，例如 doScroll，要求最初的文档被完全加载。如果这些方法是初始化函数的一部分，当ondocumentready 事件触发，他们将被执行。

/*
 *
 * IEContentLoaded.js
 *
 * Author: Diego Perini (diego.perini at gmail.com) NWBOX S.r.l.
 * Summary: DOMContentLoaded emulation for IE browsers
 * Updated: 05/10/2007
 * License: GPL/CC
 * Version: TBD
 *
 */



  w fn 
     d  wdocument   
    
    init
          
              
            fn
        
    
    
      
         
            
            ddocumentElementdoScroll
          e 
            setTimeoutargumentscallee 
            
        
        
        init
    
    
    donreadystatechange   
         dreadyState   
            donreadystatechange  
            init
        
    

JQuery 1.3.2 中源码实现如下：

  documentdocumentElementdoScroll  window  windowtop  
      jQueryisReady  

     
        
        
        documentdocumentElementdoScroll
      error  
        setTimeout argumentscallee  
        
    

    
    jQueryready

YUI 2.7.0 中源码实现如下：

 EUisIE 

    
    
    YAHOOutilonDOMReady
            YAHOOutil_tryPreloadAttach
            YAHOOutil 

     n  documentcreateElement  

    EU_dri  setInterval 
         
            
            ndoScroll
            clearIntervalEU_dri
            EU_dri  
            EU_ready
            n  
          ex 
        
     EUPOLL_INTERVAL 

另外对于版本小于 Safari 3+ 的 Safari 浏览器， 也提供了一个解决方案：

 itestnavigatoruserAgent  
     _timer  setInterval 
         loadedcompletetestdocumentreadyState 
            clearInterval_timer
            init 
        
     

怿飞提示：

documentattachEvent 
      documentreadyState
        documentdetachEvent  argumentscallee 
        jQueryready
    

扩展阅读：