[JavaScript] DOMContentLoaded, load. beforeunload, unlaod 이벤트

HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여한다.

• DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생. 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않는다.
• load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생.
• beforeunload/unload – 사용자가 페이지를 떠날 때 발생.

세 이벤트는 다음과 같은 상황에서 활용할 수 있다.

• DOMContentLoaded – DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때
• load – 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후이기 때문에 스타일이 적용된 상태이므로 화면에 뿌려지는 요소의 실제 크기를 확인할 수 있음
• beforeunload – 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때
• unload – 사용자가 진짜 떠나기 전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때

1. DOMContentLoaded

DOMContentLoaded 이벤트는 document 객체애서 발생한다. 따라서 이 이벤트를 다루려면 addEventListner를 사용해야 한다.

<script>
  function ready() {
    alert('DOM이 준비되었습니다!');

    // 이미지가 로드되지 않은 상태이기 때문에 사이즈는 0x0
    alert(`이미지 사이즈: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener("DOMContentLoaded", ready);
</script>

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

--> 위 예시에서 DOMContentLoaded 핸들러는 문서가 로드되었을 때 실행된다. 따라서 핸들러 아래쪽에 위치한 <img> 뿐만 아니라 모든 요소에 접근할 수 있다.

그렇지만 이미지가 로드되는 것은 기다리지 않기 때문에 alert창엔 이미지 사이즈가 0이라고 뜬다.

 

2. window.onload

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">

--> 이미지가 모두 로드되고 난 후 실행되기 때무네 이미지 사이즈가 제대로 출력된다.

 

3. window.onunload

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

 

** 사용자가 떠날 때 분석정보를 보내려면?? (unload 이벤트를 통해 사용자가 페이지를 떠날 때 분석정보를 서버로 보내는게 적절하기 때문)

--> navigator.sendBeacon(url, data)를 사용할 수 있다.

let analyticsData = { /* 분석 정보가 담긴 객체 */ };

window.addEventListener("unload", function() {
  navigator.sendBeacon("/analytics", JSON.stringify(analyticsData));
};

4. window.onbeforeunload

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

beforeunload 이벤트를 사용하면 사용자가 페이지를 떠날 때 정말로 떠날 것인지 묻는 확인 대화 상자를 표시할 수 있다고 한다.

window.onbeforeunload = function() {
  return false;
};

--> 이 코드를 실행하고 페이지를 새로고침 하면, 아래와 같은 얼럿창이 뜬다. 아래의 얼럿창을 커스텀할 수는 없다!!