7.1.1 window와 관련된 이벤트 핸들러 속성
window와 관련된 이벤트는 사용자가 웹브라우저 전체에 영향을 줄 때 발생하는 이벤트로 가장 일반적으로 사용되는 이벤트로는 특정 웹페이지를 브라우저를 통해 열 경우로 대표적으로 IE, Firefox 같은 웹 브라우저를 이용하여 다음(daum)이나 네이버(naver) 포탈 사이트를 열 경우 발생하는 load 이벤트와 닫을 때 발생하는 unload 이벤트를 들 수 있습니다. 주요 이벤트와 관련된 이벤트 핸들러 속성을 정리하면 다음과 같습니다.
|
이벤트 핸들러 속성 |
설명 |
|
onload |
페이지 로딩(Loading)이 끝나면 발생하는 load 이벤트 처리 |
|
onunload |
페이지가 닫히거나 다시 세팅될 때 발생하는 unload 이벤트 처리 |
|
onresize |
window의 크기가 변동되면 발생하는 resize 이벤트 처리 |
|
onfocus |
해당 window에 초점(focus)이 갈 때 발생하는 focus 이벤트 처리 |
|
onblur |
onfocus 이벤트 핸들러와
반대로 해당 window가 초점을 잃으면 발생 |
먼저 onLoad, onUnLoad 이벤트 핸들러 속성을 이용하여 페이지가 로딩이 끝났을 때와 페이지가 닫히거나 다시
세팅될 때 발생하는 이벤트 처리에 대해서 알아봅니다.
메모장을 열어서 다음과 같이 a 요소를 이용하여 하나의 링크와 이미지를 나타내는 코드를 body 요소 블록 안에 작성합니다. body 시작 요소 태그 안에 onLoad, onUnLoad 이벤트 핸들러 속성에 각각 페이지가 로드되면 발생하는 load 이벤트 발생시 처리할 함수와 페이지가 언로드되거나 다시 세팅될 때 발생하는 unload 이벤트 발생시 처리할 함수를 작성합니다.
그 다음 실제 함수 코드를 <script> … </script> 블록
안에 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>window의 load, unload 예제 </title>
<script
type="text/javascript">
function pageLoad()
{
alert("웹페이지가 로드됨");
}
function pageUnLoad()
{
alert("웹페이지가 언로드됨");
}
</script>
</head>
<body onload="pageLoad()"
onunload="pageUnLoad()">
<img src="flower2.jpg"
/><br />
<a
href="http://fromyou.tistory.com"> 제 블로그로 이동</a>
</body>
</html>
작성을 완료한
후 “windowonLoadUnLoad.html”로 저장하고 IE9를
통해 확인합니다.
그러면 다음과 같이 “windowonLoadUnLoad.html” 문서의 body 태그 안에 있는 모든 내용이 다 로드가 완료된 후 load 이벤트가
발생하여 다음과 같이 “웹페이지가 로드됨”이라는 알림창을
통해 알려줍니다.
이제 IE9 브라우저 상단의 다음 그림과 같은 새로고침(F5)을 클립합니다.
그러면 unload 이벤트가 발생하여 이벤트 핸들러 속성에 연결된 pageUnLoad() 함수가 실행되어 다음과 같이 “웹페이지가 언로드됨” 알림창이 나타나고 확인 버튼을 누르면 다시 웹페이지가 새롭게 로드되므로 load 이벤트와 연결된 pageLoad() 함수를 호출하여 “웹페이지가 로드됨”이라는 알림창을 통해 나타냅니다.
마지막으로 “제 블로그로 이동”을 클릭하면 새로운 페이지를 열게 되므로 “웹페이지가 언로드됨” 알림창이 나타나게 됩니다.
다음으로 onresize, onfocus, onblur 이벤트 핸들러 속성을 알아보기 위해서 메모장으로 “windowonLoadUnLoad.html” 문서를 열고 <script> … </script> 블록 부분과 <body> 부분을 다음과 같이 수정합니다.
<script
type="text/javascript">
function moveFunc() {
alert("윈도우창 이동");
}
function resizeFunc() {
alert("크기가 변경됨");
}
function focusFuc() {
alert("해당 윈도우에 초점이 감");
}
function blurFunc() {
alert("해당 윈도우에 초점이 사라짐");
}
</script>
</head>
<body onmove="moveFunc()"
onresize="resizeFunc()"
onfocus="focusFuc()" onblur="blurFunc()">
위와 같이 각
이벤트 핸들러 속성에 이벤트 발생시 처리할 함수를 명시하고 <script>…</script>
블록 내에 해당 함수들의 실제 코드를 작성한 후 다른 이름으로 저장을 선택합니다.
“windowonResize.html”로 저장하고 IE9로 열어봅니다.
그러면 맨처음 “windowonResize.html”가 로드되고 활성화되어 초점(focus)이 가므로 다음과 같이 “해당 윈도우에 초점이 감” 알림창이 나타나게 됩니다.
위에서 확인
버튼을 클릭하여 알림창을 닫은 후 하단 모서리를 마우스를 이용하여 크기에 변화를 주면 resize 이벤트가
발생하여 이와 연관된 onresize 이벤트 핸들러 속성과 연결된 resizeFunc()
함수를 호출하여 화면에 “크기가 변경됨”을 알림창을
통해 나타냅니다.
그리고 현재 브라우저가 아닌 곳을 마우스로 선택하면 blur 이벤트가 발생하여 이와 연결된
blurFunc() 함수를 호출하여 화면에 “해당 윈도우에
초점이 사라짐”이라고 알림창을 통해 나타냅니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 7.1.3 키보드(Keyboard)와 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
|---|---|
| 7.1.2 마우스(Mouse)와 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
| 7. 이벤트(Event)와 이벤트 핸들러(EventHandler) (0) | 2013.08.06 |
| 6.6 해쉬 테이블(HashTable) (0) | 2013.08.06 |
| 6.5 이차원 배열 (0) | 2013.08.06 |
