웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
window 객체의 onload 이벤트 본문
window 객체의 onload 이벤트
window 객체의 onload 속성을 사용하는 것으로 on으로 시작하는 속성을 이벤트 속성이라고 부르고 함수를 할당해야 한다.
onload 이벤트 선언
window.onload = function(){
// 내용
}
위 코드는 window 객체 로드가 완료되면 그때 자동으로 함수를 실행시켜 안에 내용대로 작업을 수행한다. window 객체로드가 완료되는 시기는 html 의 모든 태그가 화면에 올라가는 순간이다.
웹브라우져는 위에서 부터 아래로 태그를 차례대로 실행하고 화면에 출력 하는데 스크립트가 먼저 작성되고 태그가 나중에 작성된 경우, 또는 기타 환경에 따라 생각했던 결과와 다르게 나타날 수 있다.
ex1) head 안에 스크립트를 넣은경우
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>window.onload</title>
<script>
document.getElementById('size').style.color="red";
// 문서에서 size 라는 id 를 찾아 컬러를 레드로 변경
</script>
</head>
<body>
<h1 id="size"> window.onload</h1>
</body>
</html>
위 사진을 보면 텍스트의 글자 색상이 변하지 않을 것을 확인할 수 있다.
윈도우가 로드 되면서위에서 부터 순차적으로 실행하기 때문에 문서에 body 태그가 실행되기 전에 script가 실행 되 었기 때문이다.
body 에 아무것도 존재 하지 않은 상태에서 script를 실행했고 body 태그에 size 라는 id가 생성되기 전이 였기 때문에 size 라는 아이디를 찾지 못하고 그대로 끝마친 것이다.
ex1) window.onload 이벤트
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>window.onload</title>
<script>
// 문서의 로드가 완료된 이후 함수 실행
window.onload = function(){
document.getElementById('size').style.color="red";
// 문서에서 size 라는 id 를 찾아 컬러를 레드로 변경
}
</script>
</head>
<body>
<h1 id="size"> window.onload</h1>
</body>
</html>
위 사진은 텍스트의 글자 색상이 변한 것을 확인할 수 있다.
기존 예제와 같이 body 태그가 시작되기 전에 head 태그에 script 가 선언되었지만 window.onload 이벤트를 사용하여 문서가 완료되고 난 이후에 script를 실행하 였기때문에 body 태그에서 size 라는 id 를 찾을수 있었기 때문이다.
'javascript > 브라우져객체모델' 카테고리의 다른 글
| navigator 객체 (0) | 2015.04.06 |
|---|---|
| location 객체 (0) | 2015.04.06 |
| screen 객체 (0) | 2015.04.06 |
| window 객체 기본메서드 (0) | 2015.04.02 |
| window 객체 타이머 메서드 (0) | 2015.04.01 |
