Document.onload, Document.addEventListener 차이

1. document.onload

 

이 이벤트는 웹페이지의 모든 요소(이미지, 스타일시트, 스크립트 등)가 완전히 로드되고 나서 발생

이미지나 다른 외부 파일들이 많은 페이지에서는 성능이 지연 될 수 있다.
DOM 조작을 위한 스크립트에서는 일반적으로 권장되지 않습니다.

만약 사용할 경우 하단에 있는 body 바로 위에 넣어서 사용한다.

 

2. document.addEventListener('DOMContentLoaded', function() {...})

 

이 이벤트는 HTML이 완전히 파싱되고 DOM 트리가 구축되었을 때 발생한다.

외부 리소스(예: 이미지, 스타일시트)의 로딩 여부와 관계없이 실행된다.

따라서 DOM 조작이 필요한 스크립트에 더 적합하며 **document.onload**보다 일반적으로 더 빨리 실행된다.

 

결론

document.onload : 전체 페이지의 로딩을 기다려야 하므로 DOM 조작에는 적합하지 않는다.

document.addEventListener('DOMContentLoaded', function() {...})을 사용하는 것이 더 효율적이다.