[front] $(document).ready(function(){}) 자바스크립트 버전?

 

$(document).ready(function(){}) 자바스크립트 버전을 찾아보면 아래 script가 나온다.

 

 

<script>
    document.addEventListener("DOMContentLoaded", function(){
        console.log('document.addEventListener.DOMContentLoaded');
    });
</script>

EventTarget.addEventListener(event, function()) 함수는
EventTarget에 event가 발생 했을 때, function() 을 작동시킨다.

 

그렇다면 document 에서 발생하는 DOMContentLoaded 이벤트는 무엇일깡

간단한 결론만 말하면,
HTML문서가 완전히 파싱 / 로드되기 전에, DOM 트리가 완성되는 즉시 발생하는 이벤트이다.

 

https://ko.javascript.info/onload-ondomcontentloaded

DOMContentLoaded, load, beforeunload, unload 이벤트

 

위의 내용을 정리했습니다.

 

 DOMContentLoaded 

-  DOMContentLoaded 이벤트는 document 객체에서 발생한다.

   따라서, 이 이벤트를 다루려면 document.addEventListener를 사용해야 함

-  브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다.

    브라우저는 HTML 문서를 읽는 중 <script> 태그를 만나면 DOM 트리 구성을 멈추고 <script>를 실행하므로,  DOMContentLoaded 이벤트는 HTML 문서 내 스크립트가 있다면 해당 스크립트 내용이 실행 된 이후에 발생한다.

-  이미지 파일(<img>)이나 스타일시트 등의 기타 자원이 로드될 때까지 기다리지 않는다.

    따라서, DOM이 준비된 것을 확인한 직후에, 원하는 DOM 노드에 핸들러를 등록하는 등의 인터페이스를 초기화할 때 사용한다.

<예제>

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(){
        console.log('document.addEventListener.DOMContentLoaded');
    });
</script>

<script>
	console.log("인라인 스크립트가 실행되었습니다.");
</script>

<결과 콘솔>

인라인 스크립트가 실행되었습니다.
document.addEventListener.DOMContentLoaded

 

 

---

+)  html 자원들을 불러오는 과정이 모두 끝났을 때 발생시키기

<script>
    window.onload = function(){
        console.log('window.onload');
    }
</script>

window.onload 는

HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생한다. 이미지 사이즈를 확인할 때 등, 외부 자원이 로드된 후이기 때문에 스타일이 적용된 상태이므로 화면에 뿌려지는 요소의 실제 크기를 확인할 수 있다.

 

 

모던 JavaScript 튜토리얼은 사랑입니다.

https://ko.javascript.info/

모던 JavaScript 튜토리얼