[자바스크립트] DOMContentLoaded와 load 이벤트 차이점 (순서, 사용법, 예제)

JavaScript를 활용할 때, 두 가지 중요한 이벤트인 DOMContentLoaded와 load 이벤트가 있습니다. DOMContentLoaded와 load 이벤트는 웹 페이지가 로드되고 초기화되는 시점을 다루며, 각각 다른 시나리오와 목적에 사용됩니다.

 

 

이벤트 순서

1. 사용자가 웹 페이지에 접속

2. 브라우저가 웹 서버에 페이지 요청 후 HTML 파일을 응답으로 전송

3. DOM(Document Object Model) 트리가 구성 (HTML 파일을 받고, HTML 문서의 파싱)

4. 브라우저는 HTML 문서 내에서 외부 스타일시트, 스크립트 파일, 이미지 등의 리소스를 다운로드하기 위한 추가 요청

5. HTML 문서 파싱 및 DOM 구축이 진행되는 동안, DOMContentLoaded 이벤트가 발생

6. 외부 리소스(이미지, 스크립트, 스타일 등)가 모두 로드되면, load 이벤트가 발생

 

요약: 사용자가 웹 페이지를 요청하면 브라우저는 페이지의 HTML 및 관련 리소스를 다운로드하고, DOMContentLoaded 이벤트는 초기 DOM 구축이 완료된 시점에서, load 이벤트는 모든 리소스가 로드된 후에 발생합니다.

 

 

1. DOMContentLoaded 이벤트

ㅇ DOMContentLoaded 이벤트는 웹 페이지의 초기 로드와 관련이 있습니다. HTML 문서가 파싱 되고 DOM 트리가 구축되는 시점에 발생합니다.

ㅇ 시점: HTML 문서의 파싱이 완료되고 DOM 트리가 준비된 시점에 발생합니다. 이는 모든 HTML 요소가 파싱 되고 JavaScript 코드가 실행될 준비가 된 시점을 나타냅니다.

ㅇ 활용: 초기화 작업, 이벤트 리스너 등을 추가할 때 사용됩니다. 이 시점에서 DOM 요소에 접근하고 조작할 수 있으므로, 초기 페이지 설정을 구현하는 데 유용합니다.

 

document.addEventListener("DOMContentLoaded", function() {
  // 초기화 작업 및 DOM 조작 수행
});

 

2. load 이벤트

ㅇ 웹 페이지와 모든 관련 리소스(이미지, 스타일시트, 스크립트 파일 등)가 완전히 로드되고 사용자에게 표시될 때 발생합니다.

ㅇ 시점: 모든 페이지 리소스의 로드가 완료되고, 페이지의 모든 내용이 화면에 표시되는 시점에 발생합니다.

ㅇ 활용: 외부 리소스에 의존하는 작업을 수행하거나, 페이지의 모든 콘텐츠가 렌더링 된 후에 추가 작업을 수행할 때 사용됩니다.

 

window.addEventListener("load", function() {
  // 모든 리소스가 로드된 후 작업 수행
});

 

---

 

이벤트 발생 순서