일반적으로 웹 문서 body 태그의 끝나는 /body 바로 위에 script 문을 작성하면 웹문서가 로딩되는 시점을 고민할 필요가 없다.
왜냐하면 모든 DOM 트리가 완성되고 모든 외부 리소스(이미지 등) 까지 로드된 후에 script 가 실행되기 때문이다.
그러나 빠른 반응을 위해 DOM 트리는 완성되고 외부 리소스 로드되기 전인 DOMContentLoaded 이벤트에서 어떤 처리를 하는 것은 필요할 수 있다.
또한 브라우저에 모든 리소스(외부 이미지 포함)가 로드된 시점인 window의 load 이벤트도 필요한 경우가 있다.
<body>
....
<script>
console.log('여긴1')
window.addEventListener("DOMContentLoaded", function(event) {
console.log("window - DOMContentLoaded");
});
document.addEventListener("DOMContentLoaded", function(event) {
console.log("document - DOMContentLoaded");
});
window.addEventListener("load", function(event) {
console.log("window - load");
});
...
console.log('여긴2')
</script>
</body>
위의 결과는
"여긴1"
"여긴2"
"document - DOMContentLoaded"
"window - DOMContentLoaded"
"window - load"
참고로 load 이벤트리스너는 window 객체에 작성한다.
'웹개발' 카테고리의 다른 글
| 사용자 정의 스니펫 snippet 자바스크립트 설정 (0) | 2019.05.18 |
|---|---|
| TypeScript 개념 소개 (0) | 2019.04.19 |
| Promise 프라미스, 비동기 처리 (0) | 2018.12.18 |
| 자바스크립트 논리연산자의 거짓인 값, 기본값 설정 방법, 변수의 불린값 확인 (0) | 2018.12.14 |
| vscode 단어선택 더블클릭으로 , 유용한 단축키 (0) | 2018.11.29 |