DOMContentLoaded 이벤트 핸들링

📌 Events

HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여한다.

• DOMContentLoaded : 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않는다.
• load : HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생
• beforeunload/unload : 사용자가 페이지를 떠날 때 발생

이벤트 활용 예시

• DOMContentLoaded: DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때
• load : 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후이기 때문에 스타일이 적용된 상태이므로 화면에 뿌려지는 요소의 실제 크기를 확인할 수 있음
• beforeunload: 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때
• unload: 사용자가 진짜 떠나기 전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때

✏️ DOMContentLoaded

DOMContentLoaded 이벤트는 document 객체에서 발생

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

document.addEventListener("DOMContentLoaded", ready);
// "document.onDOMContentLoaded = ..."는 동작하지 않습니다.

DOMContentLoaded와 scripts

브라우저는 HTML 문서를 처리하는 도중에 <script> 태그를 만나면, DOM 트리 구성을 멈추고 <script>를 실행

스크립트 실행이 끝난 후에야 나머지 HTML 문서를 처리

<script>에 있는 스크립트가 DOM 조작 관련 로직을 담고 있을 수 있기 때문에 이런 방지책

따라서 DOMContentLoaded 이벤트 역시 <script> 안에 있는 스크립트가 처리되고 난 후에 발생

📌 DOMContentLoaded를 막지 않는 스크립트
위와 같은 규칙엔 두 가지 예외사항
async 속성이 있는 스크립트는 DOMContentLoaded를 막지 않는다.
document.createElement('script')로 동적으로 생성되고 웹페이지에 추가된 스크립트는 DOMContentLoaded를 막지 않는다.

DOMContentLoaded와 styles

외부 스타일시트는 DOM에 영향을 주지 않기 때문에 DOMContentLoaded는 외부 스타일시트가 로드되기를 기다리지 않는다.

⚠️ 예외

스타일시트를 불러오는 태그 바로 다음에 스크립트가 위치하면 이 스크립트는 스타일시트가 로드되기 전까지 실행되지 않는다.

브라우저 내장 자동완성

Firefox와 Chrome, Opera의 폼 자동완성(form autofill)은 DOMContentLoaded에서 발생.

readyState

문서가 로드되었는지 아닌지를 판단할 수 없는 경우

이럴 때 현재 로딩 상태를 알려주는 document.readyState 프로퍼티

프로퍼티의 값

• "loading" : 문서를 불러오는 중일 때
• "interactive" : 문서가 완전히 불러와졌을 때
• "complete" : 문서를 비롯한 이미지 등의 리소스들도 모두 불러와졌을 때

document.readyState의 값을 확인하고 상황에 맞게 핸들러를 설정하거나 코드를 실행

---

참고

DOMContentLoaded, load, beforeunload, unload 이벤트

DOMContentLoaded, load, beforeunload, unload 이벤트