DOMContentLoaded
DOMContentLoaded 이벤트는 HTML 문서가 완전히 구문 분석되고 모든 지연된 스크립트가 다운로드되고 실행 될 때 발생합니다.
document.addEventListener("DOMContentLoaded", () => {
console.log("문서 콘텐츠가 로드되었습니다.");
});
load
load 이벤트는 스타일시트, 스크립트, iframe 및 이미지와 같은 모든 종속 리소스를 포함하여 전체 페이지가 로드되면 이벤트가 시작됩니다.
window.addEventListerner("load", () => {
console.log("문서 전체 리소스가 로드되었습니다.");
});
window.onload vs window.addEventListener(’load')
- 기능적으로는 큰 차이 없습니다.
- 2번 이상의 호출을 할때
window.onload는 재정의를 하기 때문에 2번 이상의 호출을 할 때window.addEventListener('load')를 사용하는게 정신건강에 좋습니다.