로드 이벤트

DOM 이벤트 Event 객체

정의와 사용법

로드 이벤트는 객체가 로드된 후 발생합니다.

로드 이벤트는 가장 많이 <body> 요소에서 사용되며, 웹 페이지가 모든 내용(이미지, 스크립트 파일, CSS 파일 등)을 완전히 로드한 후 스크립트를 실행합니다.

로드 이벤트는 방문자의 브라우저 유형과 브라우저 버전을 확인하고 이 정보를 바탕으로 웹 페이지의 올바른 버전을 로드할 수 있습니다.

onload 이벤트는 쿠키 처리에도 사용될 수 있습니다 (다음 예제를 참조하세요).

예제

페이지가 로드되면 즉시 JavaScript를 실행합니다:

<body onload="myFunction()">

직접 시도해 보세요

예제 2

<img> 요소에서 onload을 사용하여. 이미지가 로드되면 즉시 "이미지가 로드되었습니다"를 알립니다:

<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
  alert("Image is loaded");
}
</script>

직접 시도해 보세요

예제 3

onload 이벤트를 사용하여 쿠키 처리:

<body onload="checkCookies()">
<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies are enabled.";
  } else {
     text = "Cookies are not enabled.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

직접 시도해 보세요

문법

HTML에서:

<element onload="myScript">

직접 시도해 보세요

JavaScript에서:

object.onload = function(){myScript};

직접 시도해 보세요

JavaScript에서 addEventListener() 메서드를 사용하여:

object.addEventListener("load", myScript);

직접 시도해 보세요

주석:Internet Explorer 8 또는 이전 버전은 지원하지 않음 addEventListener() 메서드。

기술 세부 사항

버블링: 지원하지 않음
취소 가능: 지원하지 않음
이벤트 유형: 사용자 인터페이스에서 생성된 경우UiEvent。그렇지 않으면 Event。
지원하는 HTML 태그: <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
DOM 버전: 레벨 2 이벤트

브라우저 지원

이벤트 크롬 IE 파이어폭스 사파리 오페라
onload 지원 지원 지원 지원 지원
DOM 이벤트 Event 객체