JavaScript의 페이지 로드 이벤트는 웹 페이지가 로드되거나 언로드될 때 발생하는 이벤트입니다. 이러한 이벤트를 활용하면 문서의 생명주기(lifecycle)에 맞춰 적절한 시점에 스크립트를 실행할 수 있습니다.
JavaScript의 주요 로드 이벤트
JavaScript에서 사용할 수 있는 대표적인 로드 관련 이벤트는 다음과 같습니다.
| 이벤트 | 설명 |
|---|---|
| DOMContentLoaded | DOM 트리 구성이 완료된 시점에 발생합니다. 단, 스타일시트나 이미지 같은 외부 리소스는 아직 로드되지 않았을 수 있습니다. DOM 조작이 필요한 스크립트를 빠르게 실행할 때 유용합니다. |
| load | 브라우저가 이미지, 스타일시트 등 모든 리소스까지 포함하여 페이지 전체를 완전히 로드했을 때 발생합니다. |
| beforeunload | 페이지와 리소스가 언로드되기 직전에 발생합니다. 사용자가 정말 페이지를 떠날 것인지 확인하는 대화상자를 표시하는 용도로 활용할 수 있습니다. |
| unload | 페이지가 완전히 언로드되었을 때 발생합니다. 주로 데이터 저장이나 정리 작업에 사용됩니다. |
각 이벤트의 발생 순서를 정리하면 다음과 같습니다.
DOMContentLoaded → load → (사용자가 페이지를 떠날 때) → beforeunload → unload
예제 코드
다음은 JavaScript에서 로드 이벤트를 사용하는 예제 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript 로드 이벤트</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
color: blueviolet;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript 로드 이벤트</h1>
<div class="result"></div>
<script>
let resEle = document.querySelector(".result");
document.addEventListener("DOMContentLoaded", () => {
resEle.innerHTML = "DOMContentLoaded 이벤트가 발생했습니다 <br>";
});
</script>
</body>
</html>
코드 설명
위 예제에서는 document.addEventListener() 메서드를 사용해 DOMContentLoaded 이벤트 리스너를 등록했습니다. DOM 트리가 완성되는 즉시 콜백 함수가 실행되어 .result 클래스를 가진 요소에 메시지가 출력됩니다.
실행 결과
페이지를 열면 DOM 트리가 구성되는 즉시 다음과 같은 메시지가 화면에 표시됩니다.
정리
로드 이벤트를 올바르게 이해하고 사용하면 스크립트 실행 타이밍을 세밀하게 제어할 수 있습니다. 일반적으로 DOM 조작만 필요하다면 DOMContentLoaded를, 이미지 등 모든 리소스가 준비된 후 작업해야 한다면 load 이벤트를 사용하는 것이 좋습니다.