DOMContentLoaded- 0531 TIL

• MDN 공식문서 내용 --> [ DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다. ]
• 오탈자를 입력해도 에러가 발생하지 않으므로 주의해야한다.

개인과제를 하다가 찾아보게 된 이벤트인데 처음보는 메소드라 찾아보면서 사용했다.

// document load 후 동작

window.addEventListener("DOMContentLoaded", function () {
  getMovieListAndRender();
  // DOMContentLoaded 이벤트가 발생했을 때 매개변수로 지정한 콜백 함수(getMovieListAndRender())를 실행하라 라는 의미이다.
  this.document.getElementById("search-btn").addEventListener("click", () => {
    searchAndRender(
      this.document.getElementById("search-input").value,
      movieList
    );
  });

• DOMContentLoaded 이벤트는 DOM Tree 분석이 끝나면 발생한다.
  (load는 DOM Tree 외의 모든 자원이 다 받아져서 브라우저에 렌더링(화면 표시)까지 다 끝난 시점에 발생한다.)
  --> 즉, DOM이 생성되기전 DOM을 조작하는 자바스크립트 코드가 실행되어 원하지 않는 결과를 내는 것을 막을 수 있다.