window.onload vs document.addEventListener 차이

function initApp(){
  // 온로드 후 초기화 할 내용들
}

// case 1
window.onload = initApp;

// case 2
document.addEventListener('DOMContentLoaded', initApp);

둘 중 어느것을 써야 하는가?

window.onload는 DOM모델은 물론 이미지, 외부CSS등의 모든 리소스가 다 로드 된 후에 실행됨.

특히 함수를 하나만 지정할 수가 있다. 연속해서 선언시 마지막 선언된 것만 실행됨.

window.onload = initApp;

window.onload = initApp2;

위 경우 initApp2만 실행

document.addEventListener(‘DOMContentLoaded’, initApp);

DOM모델이 로드 되었을 때 실행되므로 이미지, 외부CSS등의 모든 리소스는 아직 로딩중일 수 있다.

document.addEventListener(‘DOMContentLoaded’, initApp);

document.addEventListener(‘DOMContentLoaded’, initApp2);

document.addEventListener(‘DOMContentLoaded’, initApp3);

위와 같이 여러개의 함수를 지정할 수 있다. initApp, initApp2, initApp3 순으로 전부 실행된다.

일반적으로 document.addEventListener(‘DOMContentLoaded’, function명)을 사용하면 된다.

만약 DOM리소스 외의 리소스까지 로딩 된 후에 실행되어야 한다면 document.addEventListener(‘load’, function명)을 사용하면 된다.