해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: 문서 로딩
웹페이지를 프로그래밍적으로 제어하기 위해서는
웹페이지의 모든 요소에 대한 처리가 끝나야 합니다.
이것을 알려주는 이벤트가 load 와 DOMContentLoaded 입니다.
예시로 load 가 왜 필요한지 보겠습니다.
<html>
<head>
<script>
var t = document.getElementById('target');
console.log(t);
</script>
</head>
<body>
<p id="target">Hello</p>
</body>
</html>
위 코드의 실행결과는 null 이 출력되는 것을 볼 수 있습니다.
그 이유는 <p id="target">Hello</p>가 로딩되기 전에 자바스크립트가 실행되었기 때문입니다.
이를 해결하기 위한 방법 중 하나는 아래 코드와 같이 스크립트를 문서의 끝에 위치시키는 것입니다.
<html>
<head>
</head>
<body>
<p id="target">Hello</p>
<script>
var t = document.getElementById('target');
console.log(t);
</script>
</body>
</html>
결과가 제대로 출력되는 것을 확인할 수 있습니다.
다른 방법으로, load 이벤트를 이용할 수 있습니다.
<head>
<script>
window.addEventListener('load', function(){
var t = document.getElementById('target');
console.log(t);
})
</script>
</head>
<body>
<p id="target">Hello</p>
</body>
window 전역객체에 load 되었을 때 이벤트를 추가합니다.
그런데 load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행됩니다.
이것은 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있습니다.
반면, DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에
이미지 다운로드를 기다릴 필요가 없습니다.
<html>
<head>
<script>
window.addEventListener('load', function(){
console.log('load');
})
window.addEventListener('DOMContentLoaded', function(){
console.log('DOMContentLoaded');
})
</script>
</head>
<body>
<p id="target">Hello</p>
</body>
</html>
DOMContentLoaded 가 load 보다 먼저 출력되는 것을 알 수 있습니다.
DOMContentLoaded 이벤트는 IE9을 포함한 모든 브라우저에서 지원하고 있습니다.
'Archive > Develop' 카테고리의 다른 글
| [ JavaScript ] 자바스크립트 기본 문법 | jQuery 이벤트 (on API 사용법) (0) | 2021.02.10 |
|---|---|
| [ JavaScript ] 자바스크립트 기본 문법 | 마우스 이벤트(click,dbclick,mousedown,shtftKey,altKey,clientX,clientY) (0) | 2021.02.10 |
| [ JavaScript ] 자바스크립트 기본 문법 | 폼(form)태그 이벤트(submit, change, focus,blur) (0) | 2021.02.10 |
| [ JavaScript ] 자바스크립트 기본 동작 취소(preventDefault) (0) | 2021.02.10 |
| [ JavaScript ] 자바스크립트 기본 문법 | 이벤트 전파(버블링과 캡쳐링) (0) | 2021.02.09 |