[Vanilla JS] ready, load, onload, beforeunload 누가 누가 빠르나!

# ready, load, onload, beforeunload example code

jQuery 를 사용하지 않고, document ready, window load, body onload, window beforeunload 예제 코드 만들어보기!

# javascript excample code

const body = document.querySelector('body');

// jQuery: $(window).on('load', function() {});
window.addEventListener('load', (event) => console.log("[4-1] WINDOW LOAD"));
body.onload = () =>   console.log("[4-2] BODY ON LOAD!");
window.onload = () => console.log("[4-2] WINDOW LOAD!");
window.addEventListener('load', (event) => console.log("[4-3] WINDOW LOAD"));

// jQuery: $(window).on('beforeunload', function() { return false; });
window.onbeforeunload = function() {
    return false;
};

// jQuery: $(document).ready(function() {});
document.addEventListener("DOMContentLoaded", () => {
    console.log("[2-1] DOCUMENT READY");
});

document.addEventListener('readystatechange', event => {
    if(event.target.readyState === 'interactive') {
        console.log("[1-1] DOCUMENT INTERACTIVE");
    } else if (event.target.readyState === 'complete') {
        console.log("[3-1] DOCUMENT COMPLETE");
    }
});

document.addEventListener("DOMContentLoaded", () => {
    console.log("[2-2] DOCUMENT READY");
});

1. readystatechange interactive

• 문서의 로딩은 끝이 나고 해석 중 이지만 images, stylesheets, frames과 같은 하위 자원들은 로딩되고 있는 상태이다.

2. DOMContentLoaded (=document ready)

• 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않습니다.

3. readystatechange complete

• 문서와 모든 하위 자원들의 로드가 완료된 상태이다. 이 상태는 load 이벤트가 발생되기 직전 상태이다.

4. load (=window load, body onload)

• HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다.
• addEventListener: add의 느낌이 강함. 여러개의 load함수 추가.
  • body.addEventListener('load') 설정안됨
• onload: setter의 느낌이 강함. 마지막에 설정한 function만 동작
  • body.onload 와 window.onload 는 같은 이벤트로 본다. 
  • 둘 중 마지막에 설정한 이벤트가 동작.

5. beforeunload

• 사용자가 페이지를 떠날 때 발생합니다.

# console log

[1-1] DOCUMENT INTERACTIVE
[2-1] DOCUMENT READY
[2-2] DOCUMENT READY
[3-1] DOCUMENT COMPLETE
[4-1] WINDOW LOAD
[4-2] BODY ON LOAD! or [4-2] WINDOW LOAD
[4-3] WINDOW LOAD

# 이벤트 참조

DOM 이벤트: https://ko.javascript.info/onload-ondomcontentloaded