● 실행 순서
1. document.ready
2. window.ready
3. window.onload (문서의 모든 콘텐츠 image, script, css, etc가 로드 된 후 발생하는 이벤트)
● 설명
① document.ready
② window.ready
│ window.ready 보다 document.ready 가 먼저 실행됩니다.
│ window.ready 는 페이지 내의 이미지를 포함하여 모든 리소스가 로드 되고 나서 실행되고
│ document.ready 는 태그 등의 셋팅이 완료 되었을 때 실행되기 때문이다.
③ window.onload
│ window.onload 는 <body onload=""> 와 같은 기능이다.
│ 둘 다 선언된다면 body 의 함수가 실행되고, window.onload 함수는 실행되지 않는다.
│ window.onload 함수가 두개 이상 선언되면 마지막 한개의 함수만 실행된다.
│ 외부의 자원 (iframe, image, script) 사용하는 경우에도 해당된다.
● DOMContentLoaded
HTML과 script가 로드된 시점에 발생하는 이벤트
브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다.
이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않는다.
DOMContentLoaded 이벤트는 document 객체에서 발생한다.
즉 이벤트를 다루려면 addEventListener를 사용해야 한다.
ex) window.addEventListener('DOMContentLoaded' function(){ //실행될 코드 })
- onload 이벤트보다 먼저 발행한다. 빠른 실행속도가 필요할때 적합
- IE8 이하에서는 지원하지 않는다.
● window.addEventListener
window 객체는 브라우저 탭에 존재하는 자바스트립트 전역 최상위 객체이다.
window로 어디서든 접근이 가능하다.
window 객체 안에는 document 객체가 존재한다.
'📌 Front End > └ JavaScript' 카테고리의 다른 글
| [JavaScript] ==와 ===의 차이 (0) | 2023.03.13 |
|---|---|
| [JavaScript] 자바스크립트 비동기 처리 (0) | 2023.03.13 |
| [JavaScript] 문서와 리소스 로딩 (DOMContentLoaded, load, beforeunload, unload) (0) | 2023.03.10 |
| [JavaScript] 자바스크립트 window 객체 (0) | 2023.03.10 |
| [JavaScript] DOM 객체와 이벤트 처리 (0) | 2023.03.10 |
