# HTML에 생명을 주는 주요 이벤트

• DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이미지 파일이나 스타일시트 등의 기타 자원은 기다리지 않는다.

• load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합다.

• beforeunload/unload – 사용자가 페이지를 떠날 때 발생한다.

# 세가지 이벤트의 활용

• DOMContentLoaded – DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때

• load – 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후이기 때문에 스타일이 적용된 상태이므로 화면에 뿌려지는 요소의 실제 크기를 확인할 수 있음

• beforeunload – 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때

• unload – 사용자가 진짜 떠나기 전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때

DOMContentLoaded

DOMContentLoaded 이벤트는 document 객체에서 발생합니다.
따라서 이 이벤트를 다루려면 addEventListener를 사용해야 합니다.

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

DOMContentLoaded와 scripts

브라우저는 HTML 문서를 처리하는 도중에 scrip 태그를 만나면 , DOM 트리 구성을 멈추고 script를 실행한다. 따라서 DOMContentLoaded 이벤트 역시 script 안에 있는 스크립트가 처리되고 난 후에 발생합니다.

// 아래에 script alert이 실행되고 난 후 두번째로 실행
<script>
  document.addEventListener("DOMContentLoaded", () => {
    alert("DOM이 준비되었습니다!");
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>

// 스크립트 아래코드가 먼저 실행
<script>
  alert("라이브러리 로딩이 끝나고 인라인 스크립트가 실행되었습니다.");
</script>

window.load

window 객체의 load 이벤트는 스타일, 이미지 등의 리소스들이 모드 로드되었을 때 실행된다. load 이벤트는 onload 프로퍼티를 통해서도 사용할 수 있다.

<script>
  window.onload = function() { // window.addEventListener('load', (event) => {와 동일합니다.
    alert('페이지 전체가 로드되었습니다.');

    // 이번엔 이미지가 제대로 불러와 진 후에 얼럿창이 실행됩니다.
    alert(`이미지 사이즈: ${img.offsetWidth}x${img.offsetHeight}`);
  };
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

위 예시에서 window.onload는 이미지가 모두 로드되고 난 후 실행되기 때문에 이미지 사이즈가 제대로 출력되는 것을 확인할 수 있다.

window.unload

window 객체의 unload 이벤트는 사용자가 페이지를 떠날 때, 즉 문서를 완전히 닫을 때 실행된다. unload 이벤트에선 팝업창을 닫는 것과 딜레이가 없는 작업을 수행할 수 있다.

window.beforeunload

사용자가 현재 페이지를 떠나 다른 페이지로 이동하려 할 때나 창을 닫으려고 할 때 beforeunload 핸들러에서 추가 확인을 요청할 수 있다.

<script>
window.onbeforeunload = function() {
  return false;
};
</script>

beforeunload 이벤트를 취소하려 하면 브라우저는 사용자에게 확인을 요청한다.