개요
바닐라 자바스크립트에서 페이지 시작 시에 DOM 에 이벤트 리스너를 붙여주고 싶다면, document.addEventListener() 혹은 window.addEventListener() 와 같이 이벤트를 붙이는 것으로 시작하는데, 보통 아래의 두 이벤트 타입 중 하나를 사용한다.
DOMContentLoadedload(onload)
위의 두 방법은 소스코드가 비슷하여 얼핏 같은 역할을 한다고 이해하기 쉬우나 미세한 차이가 있다.
DOMContentLoaded 를 이용하는 방법
document.addEventListener(
"DOMContentLoaded",
function () {
// attach event listeners here.
},
false
);- 이 이벤트는 말 그대로 '모든 DOM 컨텐트' 가 로드되었을 때, 실행된다.
- 이미지, 외부 CSS 등의 리소스는 여전히 로딩 중일 수 있다.
DOMContentLoaded는 반드시document에 붙여져야 한다.
load (onload) 를 이용하는 방법
window.addEventListener(
"load",
function () {
// attach event listeners here.
},
false
);- 이 이벤트는 전체 페이지가 로드되었을 때 실행된다.
- 이미지, 외부 CSS 등의 리소스까지 전부 로드되었을 때 실행된다.
load는 반드시window에 붙여져야 한다.document는load이벤트가 존재하지 않기 때문이다.
어떤 것을 사용해야 하는가?
정답은 없다. 그러나, 일반적인 용도로는 DOMContentLoaded 면 충분하다. 만일 이미지의 사이즈나 CSS 가 전부 로드되었을 때의 스타일정보 등이 필요하다면 load 를 선택적으로 이용할 수 있다.
레퍼런스
반응형
'자바스크립트 > 개념' 카테고리의 다른 글
| 자바스크립트 클래스 간단 정리 (0) | 2022.07.30 |
|---|---|
| 자바스크립트 호이스팅 매우 간단히 정리 (0) | 2022.07.30 |
| 자바스크립트 클로저 (Closure) 란 무엇인가? (0) | 2022.07.13 |
| 자바스크립트 var , let , const 의 스코프 차이에 대해 알아보자. (0) | 2022.07.13 |
| 자바스크립트의 Proxy 란? (0) | 2022.06.30 |