이벤트를 로드
예시
페이지가 로드된 직후 JavaScript를 실행합니다.
<body onload="myFunction()">
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
onload 이벤트는 객체가 로드되었을 때 발생합니다.
onload는 웹 페이지가 모든 콘텐츠(이미지, 스크립트 파일, CSS 파일 등 포함)를 완전히 로드한 후 스크립트를 실행하기 위해 <body> 요소 내에서 가장 자주 사용됩니다.
onload 이벤트를 이용하여 방문자의 브라우저 종류 및 브라우저 버전을 확인하고, 해당 정보를 기반으로 웹페이지의 적절한 버전을 로드할 수 있습니다.
onload 이벤트는 쿠키를 처리하는 데에도 사용할 수 있습니다(아래 "추가 예" 참조).
브라우저 지원
| Event | |||||
|---|---|---|---|---|---|
| onload | Yes | Yes | Yes | Yes | Yes |
통사론
HTML:
<element onload="myScript">
자바스크립트:
object.onload = function(){myScript};
JavaScript에서 addEventListener() 메서드를 사용하여 다음을 수행합니다.
object.addEventListener("load", myScript);
참고: addEventListener () 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.
기술적 세부 사항
| 거품: | 아니 |
|---|---|
| 취소 가능: | 아니 |
| 이벤트 유형: | 사용자 인터페이스에서 생성된 경우 UiEvent , 그렇지 않은 경우 Event . |
| 지원되는 HTML 태그: | <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style> |
| DOM 버전: | 레벨 2 이벤트 |
더 많은 예
예시
<img> 요소에 onload 사용. 이미지가 로드된 직후 "이미지가 로드되었습니다" 경고:
<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
예시
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>