자바스크립트가 실행되는 시기를 클릭, 문서 로딩, 드래킹과 같은 사용자의 행위에 따라 정해 줄수 있는데 이때 사용하는 것이 이벤트핸들러입니다.
이벤트핸들러와 이벤트의 차이점을 확인해보겠습니다.
이벤트는 사용자가 마우스를 움직이거나 키를 누르는 등의 동작을 말하는 것이고, 이벤트 앞에 on을 붙이면 이벤트핸들러가 되는데 이것은 "이벤트가 발생했을 때"로 해석할 수 있습니다.
결국 사용자의 행위 자체는 이벤트이고, 사용자이ㅡ 행위를 전달하는 시점이 이벤트 핸들러가 됩니다.
================ 자바스크립트에서 제공하는 이벤트아 이벤트핸들러의 종류 ==================
-------------------------- 마우스 관련 --------------------------------
○ click(onClick)
- 창, 버튼 등을 클릭했을 때
○ dblclick(onDblclick)
- 마우스를 더블클릭했을 때
○ mouserover(onMouserover)
- 링크나 그림 위로 마우스가 올라올 때
○ mouseout(onMouseout)
- 마우스가 링크나 그림 영역에서 벗어났을 때
○ mousedown(onMousedown)
- 마우스 버턴을 누르는 순간
○ mouseup(onMouseup)
- 마우스 버튼을 눌렀다가 떼는 순간
○ mousemove(onMousemove)
- 마우스가 위치를 옮겼을 때
○ dragdrop(onDragDrop)
- 마우스를 클릭한 상태에서 이동했을 때
---------------------------------------------------------------------------
--------------------------- 포커스 관련 -------------------------------
○ focus(onFocus)
- 커서가 위치할 때
○ blur(onBlur)
- 커서를 잃어버렸을때
---------------------------------------------------------------------------
--------------------------- 키보드 관련 ---------------------------------
○ keydown(onKeydown)
- 키보드의 키를 누를 때
○ keypress(onKeypress)
- 키보드의 키를 누르는 순간
○ keyup(onKeyup)
- 키보드의 키를 눌렀다가 떼는 순간
---------------------------------------------------------------------------
-------------------------- 폼 관련 --------------------------------
○ submit(onSubmit)
- 전송 버튼을 눌러 폼 문서를 제출할 때
○ reset(onReset)
- 입력 양식을 초기화했을 때
○ select(onSelect)
- 입력 상자의 문자열을 선택하거나 체크상자, 라디오 버턴을 선택할 때
○ change(onChange)
- 입력 양식의 값이 바뀌었을 때
- 목록상자의 항목을 변경했을 때
---------------------------------------------------------------------------
-------------------------- 윈도우 관련 -------------------------------
○ load(onLoad)
- 브라우저에서 문서를 읽어올 때
○ unload(onUnload)
- 브라우저의 문서를 닫을 때
○ move(onMove)
- 프레임이나 브라우저를 이동했을 때
○ resize(onResize)
- 프레임이나 브라우저의 크기를 변경했을 때
---------------------------------------------------------------------------
-------------------------- 그림 관련 -------------------------
○ abort(onAbort)
- 그림을 읽는 도중 중지했을 때
○ error(onError)
- 문서나 그림을 읽는 도중 중지했을 때
---------------------------------------------------------------------------
========== 예제 ===============
<홈페이지에 이벤트 발생시키기>
1. 문서를 들어올때 (onload), 문서를 빠져나갈때 (onunload), 마우스로 클릭할 때 각각의 이벤트
핸들러에 따라 나타나는 메시지를 다르게 설정해 본다. 그리고 홈페이지 이동시 아이디 입력상자에 자동으로 커서를
가져다 놓는다.
형식) <body onload="frm1.id.focus();alert('환영합니다')" onunload="alert('또 놀러오세요')">
------------------------ 예제1----------------------------------------
<html>
<head>
<title>Test</title>
<head>
<body onload="frm1.id.focus();alert('환영합니다')" onunload="alert('또 놀러오세요')">
<form name=frm1>
아아디: <input type=text name=id size=12>
비밀번호: <input type=password name=ps size=12>
로그인 : <input type=button name=Login value="로그인" onclick="alert('아직구현이안됬음')">
</form>
</body>
</html>
--------------------------------------------------------------------------------
------------------------------------------------------------------
<그림에 롤오버 효과주기>
2. onmouseover, onmouseout 이벤트핸들러와 문서의 그림 객체를 사용하여 그림 위에 마우스를 올리면 다른 그림으로 교체
형식)<a href="#" onmouseover="document.images.img1.src='2.gif'" onmouseout="document.images.img1.src='1.gif'">
<img src="1.gif" name=img1 border=0>
-------------------------- 예제2 --------------------------------------------
<html>
<head>
<title>Test</title>
<head>
<body bgcolor=skyblue>
<a href="#" onmouseover="document.images.img1.src='2.gif'" onmouseout="document.images.img1.src='1.gif'">
<img src="1.gif" name=img1 border=0>
</body>
</html>
--------------------------------------------------------------------------------
<시작페이지로 추가하기>
<a HREF=# onclick="this.style.behavior='url(#default#homepage)';this.sethomepage('http://www.hanbitbook.co.kr');"> 한빛 미디어를 시작페이지로!</a>
<즐겨찾기에 추가하기>
<a HREF=# onclick="window.external.addfavorite('http://www.hanbitbook.co.kr','한빛 미디어')">
<마지막 업데이트 일시 표시하기>
<script language=javascript>
document.write("마지막 업데이트 일시 : " + document.lastModified)
</script>
<마우스를 하이퍼링크 문자 위에 올릴시 상태표시줄 바꾸기>
<a href="http://www.daum.net" onmouseover="window.status='다음넷 메인 홈으로!!';return true">
http://www.daum.net</a><br><br>
<a href="http://cafe.daum.net" onmouseover="window.status='다음넷 까페로!!';return true">
http://cafe.daum.net</a><br><br><br><br>
<마우스 버튼에 올릴시 덱스트 박스 내용 변경>
<textarea name="saying" rows="8" cols="40">아래 글자에 마우스를 올려보세요~</textarea><br><br>
<!-- 코딩2 -->
<a href=# onmouseover="saying.value='당신이 어디에 있는지, 어디를 향해 가고 있는지도 모를 정도로 바쁘게 살진 말라.'" onmouseout="saying.value='아래 글자에 마우스를 올려보세요~'">한글</a>
<!-- 코딩3 -->
<a href=# onmouseover="saying.value='Don\'t run through life so fast that you forget not only where you\'ve been but also where you are going. '" onmouseout="saying.value='아래 글자에 마우스를 올
려보세요~'">영문</a> <br><br>
<a링크 클릭스 텍스트 박스 문자 넣기>
<a href=# onclick="ans1.value='힘'">[정답보기]</a>
<input type="text" name="ans1"><br><br>
<a href=# onclick="ans2.value='고히'">[정답보기]</a>
<input type="text" name="ans2"><br><br>
<행단위 링크 및 마우스 올릴시 테이블 색 변환 및 상태표시줄 변환>
<tr onMouseOver="this.style.backgroundColor='#EEEDED';window.status='http://www.hanbitbook.co.kr'" onMouseOut="this.style.backgroundColor='white'"
onClick="location.href='http://www.hanbitbook.co.kr'">
<tr onMouseOver="this.style.backgroundColor='#EEEDED';window.status='http://www.naver.com'" onMouseOut="this.style.backgroundColor='white'" onClick="location.href='http://www.naver.com'">
<td>2</td><td>여름 휴가 계획</td><td>주노</td><td>2003.7.3</td></tr>
<tr onMouseOver="this.style.backgroundColor='#EEEDED';window.status='http://www.empas.com'" onMouseOut="this.style.backgroundColor='white'" onClick="location.href='http://www.empas.com'">
<td>3</td><td>2003년 박람회 일정</td><td>타스</td><td>2003.6.30</td></tr>
<tr onMouseOver="this.style.backgroundColor='#EEEDED';window.status='http://www.nate.com'" onMouseOut="this.style.backgroundColor='white'" onClick="location.href='http://www.nate.com'">
<td>4</td><td>모임 후기 사진</td><td>호이</td><td>2003.6.13</td></tr>
<tr onMouseOver="this.style.backgroundColor='#EEEDED';window.status='http://www.korea.com'" onMouseOut="this.style.backgroundColor='white'" onClick="location.href='http://www.korea.com'">
<td>5</td><td>2003년 모임 일정</td><td>하니</td><td>2003.5.3</td></tr>
<이벤트헨들러 여러가지 한꺼번에 확인 onload, onfocus, onblur, onsubmit, onreset, onkeydown, onmouseover, onmouseout>
----------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title> 이벤트 핸들러 모두 알아보기 : onload, onfocus, onblur, onsubmit, onreset, onkeydown, onmouseover, onmouseout</title>
</head>
<body onload="alert('문서를 열면 onload!')" onunload="alert('문서를 닫으면 onunload!')">
<form onsubmit="alert('폼을 제출합니다.')" onreset="alert('입력양식을 초기화합니다.')">
<input type="button" value="마우스를 올려보세요~" onmouseover="alert('마우스를 올리면 onmouseover')">
<input type="button" value="마우스를 올렸다가 빠져보세요~" onmouseout="alert('마우스가 빠져나가면 onmouseout')"><p>
아이디: <input type="text" size=50 value="입력박스 안에 클릭한 다음 배경을 다시 클릭해 보세요~" onfocus="alert('입력박스에 클릭하면 onfocus')" onblur="alert('입력박스에서 포커스가 떠나면 onblur')"><p>
비밀번호 :<input type="text" size=50 value="입력박스 안에서 키보드를 입력해 보세요~" onkeydown="alert('키를 누르면 onkeydown')" ><p>
입력상자 : <input type=text size=50 value="입력박스 안에 클릭하면 문자가 사라져요.." onFocus="this.value=''" onBlur="this.value='한번 클릭한 다음 나가면 다시 문자가 나타나요..'"> <p>
<input type="button" value="확인" onclick="alert('버튼을 클릭하면 click 이벤트 발생')">
<input type="submit" value="보내기">
<input type="reset" value="다시쓰기">
</form>
</body>
</html>