728x90
ie8이하 지원 X
- DOMContentLoaded
HTML이 모두 로드되고, DOM 트리가 완성되었지만, 외부 리소스(img, etc.)가 아직 로드되지 않았을 때 실행하는 이벤트로 DOM이 준비 상태이기 때문에 DOM 노드를 제어할 수 있음.
jQuery의 ready와 동일하다고 볼 수 있다.
- load
브라우저의 모든 리소스(img, style, script, etc..)가 로드되었을 때 실행하는 이벤트로 모든 리소스가 로드된 시점이기 때문에, img 사이즈와 같은 값을 얻을 수 있다.
- beforeunload / unload
페이지를 떠날 때 실행하는 이벤트로 변화에 따른 저장 여부 및 페이지 이탈 여부를 확인할 수 있다.
1. load보다 DOMContentLoaded를 사용하는 이유?
load는 모든 리소스를 로드해야 하므로 DOMContentLoaded가 먼저 발생한 후 발생한다. 대부분 모든 리소스를 기다릴 필요가 없기 때문에, 단순히 빠른 실행을 하기 위함.
2. 관련 이벤트를 하단에 작성하는 이유?
HTML문서를 파싱하는 과정에서 script 태그를 만난다면, DOM 구축 작업이 중단되고 script 작업을 실행된 후 다시 작업이 시작되므로 DOMContentLoaded 이벤트가 발생하는 시점이 script 작업 완료 시간만큼 지연된다는 의미임.
또한 상황에 따라 DOM구축이 되지 않은 상태에서 DOM을 가져오기 때문에, 정상적인 동작이 이루어지지 않음.
'javascript' 카테고리의 다른 글
| String.prototype.trim() (0) | 2022.01.13 |
|---|---|
| object.assign(target, sources) (0) | 2022.01.11 |
| CORS(클라이언트와 서버의 오리진이 다를때 발생하는 이슈) (0) | 2022.01.05 |
| 자바스크립트 비동기 처리와 콜백함수 (0) | 2022.01.04 |
| 함수와 메서드 차이 (0) | 2022.01.03 |