JavaScript의 페이지 로드 이벤트는 페이지가 로드되거나 로드 해제될 때 시작됩니다. 다음은 이벤트입니다 -
| 이벤트 | 설명 |
|---|---|
| DOMContentLoaded | dom 트리가 빌드되었지만 스타일시트, 이미지 등과 같은 외부 리소스가 여전히 로드되지 않은 경우 발생합니다. |
| 로드 | 브라우저가 모든 리소스를 완전히 로드할 때 시작됩니다. |
| 언로드 전 | 페이지와 리소스가 언로드되기 전에 실행되며 사용자가 정말로 떠나기를 원하는지 확인하는 데 사용할 수 있습니다. |
| 언로드 | 페이지가 완전히 언로드되면 시작됩니다. |
다음은 JavaScript의 로드 이벤트에 대한 코드입니다 -
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</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>Load events in Javascript</h1>
<div class="result"></div>
<script>
let resEle = document.querySelector(".result");
document.addEventListener("DOMContentLoaded", () => {
resEle.innerHTML = "The DOMContentLoaded event has fired <br>";
});
</script>
</body>
</html> 출력
