2022. 6. 23. 04:32ㆍProgram/JavaScript
110_자바스크립트 페이지 로드 시 이벤트 사용하기
[적용]
- DOM 요소 엑세스 타이밍에 맞춰 작업을 처리하고 싶을 때
- 이미지 로딩이 완료된 후 작업을 처리하고 싶을 때
[문법]
| 이벤트 | 발생 타이밍 |
| DOMContentLoaded | HTML 문서 로딩 완료 시점 |
| load | 모든 리소스 로딩 완료 시점 |
[내용]
자바스크립트에서 DOM 요소의 조작 가능 시점은 HTML 문서의 로딩 완료 시점으로
이 시점에서 DOMContentLoaded 이벤트가 발생한다.
페이지 내 .box 요소의 개수를 세는 샘플을 확인해 보자.
다른 샘플과 달리 script 태그에 defer 속성을 부여하지 않는다.
HTML index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>
</head>
<body>
<main class="main">
<div class="box">박스</div>
<div class="box">박스</div>
<div class="box">박스</div>
</main>
</body>
</html>
JavaScript main.js
// DOM 엑세스 타이밍에 처리 실행
wondow.addEventListener('DOMContentLoaded', () => {
// .box 요소 개수 가져오기
const boxNum = document.querySelectorAll('.box').length;
// 로그 출력
console.log(`.box 요소의 개수는 ${boxNum}입니다.`);
});document.querySelectorAll()은 셀렉터와 일치하는 모든 요소를 가져오며,
.length는 요소의 개수를 추출한다.
로그에서 .box 요소의 개수가 출력된다.
window.addEventListener('DOMContentloaded', () => {}) 를 사용하지 않는 경우를 확인해 보자.
HTML의 head 태그 안에 script 태그가 존재하는 경우 .box 요소의 로딩보다 자바스크립트가 먼저 실행되어 버리므로
document.querySelectorAll('.box')를 사용해도 .cox를 가져올 수 없게 된다.
그러므로 로그의 결과는 0이 출력된다.
// document.querySelectorAll('.box')는 undefined가 된다.
const boxNum = document.querySelectorAll('.box').length;
// '0'이 출력
console.log(`.box 요소의 개수는 ${boxNum}입니다.`);
load 이벤트는 페이지 내 모든 리소스(사진, 사운드, 동영상 등)의 로딩이 완료된 후 발생한다.
그러므로 DOMContentLoaded보다 시점이 느리다.
페이지가 표시되는 시점에 요소를 조작하고 싶다면 일반적으로 DOMContentLoaded를 사용한다.
[Appendix]
script 태그 defer 속성과 DOMContentLoaded
script 태그에 defer 속성을 설정하면 HTML 로딩 후 스크립트가 실행된다.
이는 DOMContentLoaded보다는 발생 시점이 앞선다.
따라서 defer 속성을 설정하면 DOMContentLoaded의 이벤트 설정은 필요가 없다.
HTML index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>
</head>
<body>
<main class="main">
<div class="box">박스</div>
<div class="box">박스</div>
<div class="box">박스</div>
</main>
</body>
</html>
JavaScript main.js
const boxNum = document.querySelectorAll('.box').length; // '3'이 출력
console.log(`.box 요소의 개수는 ${boxNum}입니다.`);
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 마우스 조작 이벤트 사용하기 (0) | 2022.06.23 |
|---|---|
| [JavaScript] 자바스크립트 클릭 이벤트 사용하기 (0) | 2022.06.23 |
| [JavaScript] 자바스크립트 이벤트 리스너 삭제하기 (0) | 2022.06.23 |
| [JavaScript] 자바스크립트 이벤트 리스너 1회 실행하기 (0) | 2022.06.22 |
| [JavaScript] 자바스크립트 이벤트 추가하기 (addEventListener()) (0) | 2022.06.22 |