자바스크립트/개념

자바스크립트 DOMContentLoaded vs load (onload) 의 차이

Jake Seo 2022. 7. 24. 17:29

개요

바닐라 자바스크립트에서 페이지 시작 시에 DOM 에 이벤트 리스너를 붙여주고 싶다면, document.addEventListener() 혹은 window.addEventListener() 와 같이 이벤트를 붙이는 것으로 시작하는데, 보통 아래의 두 이벤트 타입 중 하나를 사용한다.

  • DOMContentLoaded
  • load (onload)

위의 두 방법은 소스코드가 비슷하여 얼핏 같은 역할을 한다고 이해하기 쉬우나 미세한 차이가 있다.

DOMContentLoaded 를 이용하는 방법

document.addEventListener(
  "DOMContentLoaded",
  function () {
    // attach event listeners here.
  },
  false
);
  • 이 이벤트는 말 그대로 '모든 DOM 컨텐트' 가 로드되었을 때, 실행된다.
    • 이미지, 외부 CSS 등의 리소스는 여전히 로딩 중일 수 있다.
  • DOMContentLoaded 는 반드시 document 에 붙여져야 한다.

load (onload) 를 이용하는 방법

window.addEventListener(
  "load",
  function () {
    // attach event listeners here.
  },
  false
);
  • 이 이벤트는 전체 페이지가 로드되었을 때 실행된다.
    • 이미지, 외부 CSS 등의 리소스까지 전부 로드되었을 때 실행된다.
  • load 는 반드시 window 에 붙여져야 한다.
    • document 는 load 이벤트가 존재하지 않기 때문이다.

어떤 것을 사용해야 하는가?

정답은 없다. 그러나, 일반적인 용도로는 DOMContentLoaded 면 충분하다. 만일 이미지의 사이즈나 CSS 가 전부 로드되었을 때의 스타일정보 등이 필요하다면 load 를 선택적으로 이용할 수 있다.

레퍼런스

반응형
저작자표시 비영리