jQuery DOM ready

最近研究JavaScript頗有心得，尤其是Event和Object的操作方面，於是研究了一下jQuery的DOM處理事件，使用jQuery一定會用到的ready事件。這個事件比onLoad還要前面發生，DOM完成時，其他檔案不一定會完全載入，但是onLoad一定是全部完成時才觸發！

$(document).ready(function() {
   // do stuff when DOM is ready
});

當瀏覽器處理好DOM時則會執行function中的程式，那如何做到？答案是，JavaScript告訴Browser使用事件偵聽函式的方式。在jQuery程式碼中，有一段程式碼，就是它：

function bindReady(){
 if ( readyBound ) return;
 readyBound = true;

 // Mozilla, Opera and webkit nightlies currently support this event
 if ( .addEventListener ) {
  // Use the handy event callback
  .addEventListener( "DOMContentLoaded", function(){
   .removeEventListener( "DOMContentLoaded", arguments.callee, false );
   jQuery.ready();
  }, false );

 // If IE event model is used
 } else if ( .attachEvent ) {
  // ensure firing before onload,
  // maybe late but safe also for iframes
  .attachEvent("onreadystatechange", function(){
   if ( .readyState === "complete" ) {
    .detachEvent( "onreadystatechange", arguments.callee );
    jQuery.ready();
   }
  });

  // If IE and not an iframe
  // continually check to see if the  is ready
  if ( .Element.doScroll && window == window.top ) (function(){
   if ( jQuery.isReady ) return;

   try {
    // If IE is used, use the trick by Diego Perini
    // http://javascript.nwbox.com/IEContentLoaded/
    .Element.doScroll("left");
   } catch( error ) {
    setTimeout( arguments.callee, 0 );
    return;
   }

   // and execute any waiting functions
   jQuery.ready();
  })();
 }

 // A fallback to window.onload, that will always work
 jQuery.event.add( window, "load", jQuery.ready );
}