[Javascript] DOMContentLoaded와 onload의 차이

웹 문서를 만들때, '문서가 로드되는 시점'에 발생하는 이벤트로 주로DOMContentLoaded와 onload를 사용한다.

 

두 이벤트의 차이는 간략하게 요약하면

1. DOMContentLoaded는 DOM 트리를 완성하는 즉시 발생한다.

2. onload는 문서의 모든 콘텐츠(images, script, css, etc)가 로드되었을 때 실행된다.

 

따라서, DOMContentLoaded가 onload보다 먼저 실행된다.

 

 

아래는 사용 예시이다.

document.addEventListener("DOMContentLoaded", function () {
            //실행할 코드
        });

window.onload = function () {
            //실행할 코드
        }