Window: DOMContentLoaded 이벤트

DOMContentLoaded 이벤트는 HTML 문서가 완전히 구문 분석되고 모든 지연된 스크립트(<script defer src="…">와 <script type="module">)가 다운로드되고 실행될 때 발생합니다. 이미지, 서브프레임, 비동기 스크립트와 같은 다른 항목의 로드가 끝날 때까지 기다리지 않습니다.

DOMContentLoaded는 스타일시트의 로드를 기다리지 않습니다. 하지만 지연된 스크립트는 스타일시트를 기다리며 DOMContentLoaded 이벤트는 지연된 스크립트 이후에 대기열로 추가됩니다. 또한, 지연되지 않거나 비동기가 아닌 스크립트(예: <script>)는 이미 구문 분석된 스타일시트가 로드될 때까지 기다립니다.

이 이벤트의 원래 대상은 로드된 문서입니다. Window 인터페이스에서 이 이벤트를 수신하여 캡처 혹은 버블링 단계에서 다룰 수 있습니다. 이 이벤트에 대한 자세한 설명은 DOMContentLoaded 페이지를 참조하시길 바랍니다.

다른 이벤트인 load는 오직 완전히 로드된 페이지를 감지할 때만 사용되어야 합니다. DOMContentLoaded가 더 적절한 위치에서 load를 사용하는 것은 흔한 실수입니다.

이 이벤트는 취소할 수 없습니다.

addEventListener("DOMContentLoaded", (event) => {});

onDOMContentLoaded = (event) => {};

window.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM fully loaded and parsed");
});