Javascript 은 페이지 불 러 오기 완료 여 부 를 판단 합 니 다.

document.getElement ById 를 사용 할 때 script 태그 에서 대상 을 직접 가 져 온 다음 에 사용 하 는 경우 가 많 습 니 다.이 때 프로그램 에 서 는 이 대상 이 undefined 입 니 다.

   
   
   
   

    
    
    
    
<script> 
    
    
    
    
    var dom = document.getElementById("target"); 
    
    
    
    
    alert(dom); // undefined 
    
    
    
    
script> 
   
   
   
   

        그러나 만약 당신 이 이 코드 를 문서 의 맨 끝 에 놓는다 면,당신 이 다시 그의 결 과 를 실행 하 는 것 은 undefined 가 아 닙 니 다.이게 도대체 왜 일 까요?이 문 서 를 불 러 오 는 것 부터 말하자면 html 문서 의 불 러 오 는 것 은 모두 일정한 순서에 따라 불 러 오 는 것 입 니 다.헤드 부분의 js 에 불 러 올 때 그 는 아래 내용 의 불 러 오 는 것 을 차단 합 니 다.이때 우리 js 에서 가 져 오 는 대상 이 없 으 면 자연히 undefined 입 니 다.그러나 이 코드 를 마지막 에 놓 으 면 페이지 를 순서대로 불 러 옵 니 다.모든 html 가 불 러 오 면 js 를 불 러 옵 니 다.이때 페이지 의 대상 이 존재 하 므 로 undefined 가 되 지 않 습 니 다.
        위의 코드 는 즉시 실행 되 기 때문에 그 가 놓 은 위 치 를 고려 해 야 합 니 다.그러나 하나의 function 이 라면 코드 를 불 러 올 때 실행 되 지 않 고 호출 이 필요 한 곳 에서 만 실행 되 며 호출 된 곳 에서 페이지 내용 을 불 러 왔 기 때문에 function 에서 위의 코드 를 사용 해도 undefined 가 나타 나 지 않 습 니 다.
         jQuery 에서 우 리 는$(document).ready(function(){})를 사용 합 니 다.이 function 에서 그의 방법 은 왜 페이지 로 딩 이 끝 난 후에 실 행 됩 니까?사실 우 리 는 그의 ready 방법 을 자세히 볼 수 있 습 니 다.이런 방법 을 더욱 명확 하 게 묘사 하기 위해 서 우 리 는 다음 과 같은 시 뮬 레이 션 예 로 설명 한다.

   
   
   
   

    
    
    
    
jQuery.ready = function(f){ 
    
    
    
    
    //       
    
    
    
    
    var browser = window.navigator.userAgent; 
    
    
    
    
    var isIE = false; 
    
    
    
    
    if(/msie/.test(browser.toLowerCase())){ 
    
    
    
    
        isIE = true; 
    
    
    
    
    } 
    
    
    
    
    // IE 
    
    
    
    
    if(isIE){ 
    
    
    
    
        document.onreadystatechange = function(){ 
    
    
    
    
            if(document.readyState == "complete" || document.readyState == "loaded"){ 
    
    
    
    
                f.call(); 
    
    
    
    
            } 
    
    
    
    
        }; 
    
    
    
    
    }else{ //  IE 
    
    
    
    
        if(document.addEventListener){ 
    
    
    
    
            document.addEventListener("DOMContentLoaded", f, false); 
    
    
    
    
        } 
    
    
    
    
    } 
    
    
    
    
} 
   
   
   
   

        여기 서 ready 함 수 는 다른 함 수 를 전달 합 니 다.이 f 는 우리 가 페이지 에 불 러 온 후에 호출 해 야 할 방법 입 니 다.따라서 ready 함수 에서 우 리 는 페이지 가 불 러 올 지 여 부 를 판단 하고 ready 의 방법 을 실행 해 야 합 니 다.
        또 브 라 우 저 때문에 IE 가 또 특별 하 게!Mozilla 는 DOMContentLoaded 이 벤트 를 추 가 했 기 때문에 document 에 이 이 벤트 를 추가 하고 실행 할 함 수 를 전달 하면 됩 니 다.IE,저 는 그의 onready statechange 상 태 를 판단 해 야 합 니 다.그 가 불 러 올 때 complete 또는 loaded 일 때 우 리 는 그의 방법 을 호출 할 수 있 습 니 다.