반응형
✅ onload 이벤트란?
- onload 이벤트는 웹 페이지나 특정 요소(예: 이미지, iframe 등)가 모두 로드(불러오기)된 후 발생하는 이벤트입니다.
- 주로 페이지가 다 준비된 뒤 실행해야 하는 코드를 넣을 때 사용합니다.
- 예를 들어, DOM 요소 접근, 초기화 작업, 이미지 크기 계산 같은 것들이 이에 해당합니다.
✅ 문법
<body onload="함수명()">또는 자바스크립트 코드에서 직접 등록할 수도 있습니다:
window.onload = function() {
// 실행할 코드
};✅ 간단한 예제
👉 웹 페이지가 로드되면 "페이지 로딩이 완료되었습니다!" 라는 메시지를 띄우는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>onload 예제</title>
<script>
// 자바스크립트에서 onload 사용
window.onload = function() {
alert("페이지 로딩이 완료되었습니다!");
document.getElementById("msg").innerText = "페이지 준비 완료!";
}
</script>
</head>
<body>
<h1>onload 이벤트 예제</h1>
<p id="msg">페이지가 아직 준비되지 않았습니다...</p>
</body>
</html>📌 실행 흐름:
- 브라우저가 HTML과 리소스를 모두 읽음 →
- window.onload 이벤트 발생 →
- 알림창이 뜨고 <p> 태그 안의 문구가 바뀜.
반응형
'자바스크립트_Javascript' 카테고리의 다른 글
| 자바스크립트: setInterval() 함수, 특정 시간마다 반복적으로 함수를 실행 (1) | 2025.08.22 |
|---|---|
| 자바스크립트: setTimeout() 함수, 지정된 시간 후 실행 (0) | 2025.08.21 |
| 자바스크립트: onchange 이벤트, 값이 변경될 때 발생 (0) | 2025.08.20 |
| 자바스크립트: onclick 이벤트, 버튼을 클릭할 때마다 문자열과 배경 변경하기 (6) | 2025.08.19 |
| 자바스크립트: 이벤트 속성 종류 (1) | 2025.08.19 |