2012. 4. 25. 12:44ㆍNOTE/IT
시스템 이벤트의 종류 의미
click 마우스 클릭한 순간 발생
dblclick 4.0 마우스 더블클릭한 순간 발생
mousedown 4.0 마우스를 누르는 순간 발생
mouseup 4.0 마우스 단추에서 손을 떼는 순간 발생
dragdrop 4.0 마우스 드래그한 순간 발생
mouseout 3.0 마우스가 영역을 벗어나는 순간 발생
mouseover 마우스가 영역 안에 들어오는 순간 발생
mousemove 4.0 마우스를 움직이는 순간 발생
focus 지칭하는 개체에 포커스가 생기는 순간 발생
blur 지칭하는 개체에서 포커스가 사라지는 순간 발생
select 입력 양식에서 특정 내용을 선택한 순간 발생
change 입력 영역 안에 내용이 바꾸는 순간 발생
submit 서브밋 동작 시작시 발생
reset 3.0 리셋 동작 시작시 발생
load 페이지가 로딩되는 순간 발생
unload 페이지가 닫히는 순간 발생
abort 3.0 이미지 읽기를 강제로 중단시키는 순간 발생
error 3.0 에러가 발생한 순간 발생
keydown 4.0 키보드를 누르는 순간 발생
keypress 4.0 키보드를 누르는 순간 발생
keyup 4.0 눌려진 키보드에서 손을 떼는 순간 발생
move 4.0 화면을 움직이는 순간 발생
resize 4.0 화면의 크기를 변경하는 순간 발생
OnAbort
이벤트의 발생을 중지시킬때 사용하는 이벤트 핸들러입니다. 단지 이미지의 로딩을 중지시키는 용도로 사용한다고 되어있군요. ㅡㅡ::
예제를 한 개 보고 이야기를 진행해 보도록하겠습니다.
<html>
<body>
<img src="http://myhome.naver.com/badak2/bg.gif" onAbort="alert('이미지 로딩을 중지하였습니다')">
</body>
</html>
굉장히 간단한 예제입니다. 이미지를 불러오는 소스인데 이미지를 불러오던 도중에 사용자가 웹 브라우저 상단의 STOP(중지) 버튼을 클릭하면 "이미지 로딩을 중지하였습니다"라는 경고창을 띄워주는 역할을 합니다.
OnBlur
객체에 더 이상 포커스가 없을 때 활성화됩니다. 즉 입력을 모두 마친후 입력창에서 커서를 제거시키면 활성화 되는 이벤트입니다.
text, textarea, password, select 객체에서 사용할 수 있습니다.
<html>
<head>
<script language="javascript">
function add_it(){
document.form1.full.value = (document.form1.first.value + " " + document.form1.last.value)
}
</script>
</head>
<body>
<form name="form1">
First Name: <input name="first" type="TEXT" OnBlur="add_it()">
Last Name: <input name="last" type="TEXT" OnBlur="add_it()">
Full Name: <input name="full" type="TEXT">
</form>
</body>
</html>
OnChange
수정등과 같은 작업에 의해서 값이나 focus를 잃을 경우 활성화됩니다. Select, Text, Textarea에서 사용이 가능합니다.
JavaScript Reference에 있는 내용을 예로 들어보죠.
<input type=text value=" " name="userName" onChange="checkvalue(this.value)">
위의 예제는 사용자가 userName이라는 텍스트필드에서 벗어나려고 하거나 텍스트 필드내에 글을 수정할 경우 onChange 이벤트가 활성화 되어 현재 이 텍스트 필드의 값(this.value)을 가지고 checkvalue라는 함수를 실행시키게 됩니다.
OnClick
마우스를 클릭할 때 활성화되는 이벤트입니다.
OnClick 이벤트는 거의 대부분의 태그에서 사용할 수 있습니다.
<script language="JavaScript">
if (document.getElementById){
document.write('<style type="text/css">n')
document.write('.submenu{display: none;}n')
document.write('</style>n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("table");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu")
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>
<body>
<div id="masterdiv">
<table border="0" cellpadding="0" cellspacing="0" width="196">
<tr>
<td><a href="#" onclick="SwitchMenu('sub1')"><img src="/img/onlineconsulting/menu01_off.gif" width="196" border="0"></a></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="196" id="sub1" class="submenu">
<tr>
<td><a href="#"><img src="/img/onlineconsulting/menu01_01_off.gif" width="196" border="0"></a></td>
</tr>
<tr>
<td><a href="#"><img src="/img/onlineconsulting/menu01_02_off.gif" width="196" border="0"></a></td>
</tr>
</table>
</div>
</body>
<html>
<head>
<script language="javascript">
function print() {
window.alert("어떤 태그라도 onClick이벤트를 사용할수 있습니다.");
}
</script>
</head>
<body>
<form>
<input type="radio" onClick="print()"> Radio button <br>
<input type="checkbox" onClick="print()"> Checkbox <br>
<input type="text" onClick="print()">
<input type="button" onClick="print()" value="버튼입니다">
<input type="reset" value="초기화버튼" onClick="print()">
<input type="submit" value="전송버튼" onClick="print()">
</form>
</body>
</html>
OnDblClick
form 요소나 link 영역에서 사용자가 마우스를 double-click 하였을 때 발생하는 이벤트입니다.
주의할 점은 Macintosh에서는 이 이벤트는 활성화되지 않습니다. 즉 사용할 수 없다는 이야기죠.
OnDragDrop
사용자가 웹 브라우저 창에서 어떤 객체를 drop했을 때 발생하는 이벤트입니다.
OnDragDrop이 갖는 Properties는 다음과 같습니다.
Properties
의미
type
이벤트의 타입
target
이벤트가 원래 보내려고한(sent) 개체(objects)
data
drop된 개체의 URL을 포함하는 문자열의 배열을 반환
modifiers
이벤트가 발생할 때 종속된 modifier key의 list를 포함
screenX, screenY
이벤트가 발생한 시간의 커서의 좌표값
위의 속성중 특히 data 속성을 얻기 위해서는 웹 브라우저가 모든 종류의 보편적인 브라우저들을 다 읽어들일 수 있어야만 합니다.
onError
문서나 이미지를 로딩하는 과정중에 에러가 발생할 경우 활성화되는 이벤트입니다.
<html>
<head>
<script language="javascript">
function test(image){
alert("이미지 파일" + image.src + "을 불러올 수 없습니다.")
}
</script>
</head>
<body>
<form>
<img src="isko.jpg" onError="test(this)">
</form>
</body>
</html>
OnFocus
사용자가 특별한 객체에 클릭하거나 탭 키를 사용하여 입력커서를 옮길 때 발생합니다. 즉, 사용자가 특정개체를 입력을 하기 위해서거나 선택하기 위해서 보이는 커서 또는 보이지 않는 커서를 움직였을때 활성화되는 이벤트입니다.
blur 이벤트와 반대되는 개념이며, text, textarea, password, select 객체에서 사용할 수 있습니다.
<html>
<head>
<script language="javascript">
function am_focus(){
window.alert("'Last Name'영역에 커서가 위치했습니다.")
}
</script>
</head>
<body>
<form>
First Name: <input type="text"> Last Name: <input type="text" onFocus="am_focus()">
</form>
</body>
</html>
서로 상반되는 개념인 onFocus와 onBlur를 같이 사용한 예제를 보겠습니다. <html>
<head>
<script language="javascript">
function display(data) {
window.status = data
}
</script>
</head>
<body>
<form>
<input type="text" size=50 onFocus="display('입력커서가 입력상자에 있습니다')" onBlur="display('입력커서가 입력상자에 없습니다.')">
</form>
</body>
</html>
OnKeyDown
사용자가 키보드 상의 키를 누르고 있을 때(depress) 발생하는 이벤트입니다.
다음과 같은 속성을 갖고 있습니다.
Properties
의미
type
이벤트의 타입
target
이벤트가 원래 보내려고한(sent) 개체(objects)
largeX, largeY,
pageX, pageY,
screenX, screenY
이벤트가 창위에서 발생했을 경우, 이벤트가 발생한 시간의 커서의 좌표값
이벤트가 폼요소에서 발생했을 경우, 이벤트가 발생한 폼요소의 위치
which
눌려진 키의 ASCII 값, 정확한 값을 얻기 위해서는 string.fromCharCode를 사용
만약 키의 ASCII 값이 알려져 있지 않다면 string.charCodeAt을 사용
modifier
이벤트가 발생할 때 종속된 modifier key의 list를 포함
keydown 이벤트는 항상 keypress 이벤트 전에 발생합니다. 그렇기 때문에 keydown 이벤트가 false 값을 반환하게되면 keypress 이벤트는 절대로 발생할 수 없습니다.
OnKeyPress
OnKeyDown과 마찬가지로 사용자가 키보드 상의 키를 누르고 있을 때(press, hold down) 발생하는 이벤트입니다. 다만, 이전 설명에서 keydown보다 나중에 일어난다고 하였습니다.
마찬가지로 속성 또한 OnKeyDown과 동일합니다. 위의 항목을 참고하시길 -_-;;
OnKeyUp
사용자가 누르고 있던 키를 다시 원래대로 해방할 때 - 즉 눌렀던 손을 놓았을 때 - 발생하는 이벤트입니다.
속성 값은 OnKeyDown과 동일합니다.
OnMouseDown
사용자가 마우스 버튼을 눌렀을 때(depress) 발생하는 이벤트입니다.
속성 값은 OnKeyDown과 동일합니다.
OnMouseMove
사용자가 마우스 커서를 움직일 때 발생하는 이벤트입니다. 마우스 커서의 이동은 빈번하게 발생되는 사항이기 때문에(다 아시져 왜그런지 -.-) 일반적으로 이 이벤트 핸들러는 사용이 불가능하도록 되어 있습니다. 그렇기 때문에 사용하기 위해서는 특별한 객체에 대해서 정의해 주어야합니다.
onMouseOut
마우스 커서가 특정 영역 또는 링크에서 벗어날 때 발생하는 이벤트입니다.
OnMouseOver
마우스가 객체 위에 놓여졌을 때 활성화 되는 이벤트입니다.
<html>
<head>
<script language="javascript">
function ex1(){
window.alert("야후사이트로 연결합니다.")
}
function ex2(){
window.alert("알타비스타사이트로 연결합니다.")
}
function ex3(){
window.alert("한미르사이트로 연결합니다.")
}
</script>
</head>
<body>
<a href="http://kr.yahoo.com" OnMouseOver="ex1()">야후 코리아</a><br>
<a href="http://www.altavista.com" OnMouseOver="ex2()">알타비스타</a><br>
<a href="http://www.hanmir.com" OnMouseOver="ex3()">한미르</a>
</body>
</html>
OnMouseUp
사용자가 마우스 버튼을 눌렀다가 놓았을 때, 즉 press 상태에서 벗어났을 때 발생하는 이벤트입니다.
OnMove
사용자 또는 스크립트가 창(window) 또는 프레임을 이동했을 때 발생하는 이벤트입니다.
OnReset
사용자가 폼양식을 reset하였을 때 발생하는 이벤트입니다.
간단한 예를 볼까요
<html>
<body>
<form name="form1" onReset="alert('Defaults have been restored.')">
State:
<input type="text" name="state" value="CA" size="2"><p>
<input type="reset" value="Clear Form" name="reset1">
</form>
</body>
</html>
OnResize
사용자 또는 스크립트가 창 또는 프레임의 크기를 재조정했을 때 발생하는 이벤트입니다.
OnSelect
사용자가 text 또는 textarea 필드에서 특정한 문자열을 선택했을 때 발생하는 이벤트입니다.
역시 JavaScript Reference의 예제를 인용하여 설명하겠습니다.
<INPUT TYPE="text" VALUE="" NAME="valueField" onSelect="selectState()">
valueField라는 텍스트 영역을 선택했을 때, selectState()라는 함수를 구동시킵니다.
OnSubmit
서버에게 입력값을 전송하기 위해 전송버튼을 눌렀을 때 서버에게 입력값 을 전달하기 전에 폼으로 입력된 데이터를 검사하기 위한 이벤트입니다. 즉, 전송버튼을 눌러야만 활성화 되는 이벤트입니다.
<html>
<head>
<script language="javascript">
function check(){
if (document.num_form.num1.value.length == 5) {
window.alert("Thank you for typing only 5 characters.")
return true
}else{
window.alert("Enter 5 characters please")
return false
}
}
</script>
</head>
<body>
<form name="num_form" OnSubmit="return check(this)">
Enter five characters: <input name="num1" type="TEXT" size="20,1"> <input type="SUBMIT">
</form>
</body>
</html>
'NOTE > IT' 카테고리의 다른 글
| [JAVA SCRIPT] 함수,기본 문법 (0) | 2012.04.25 |
|---|---|
| [JAVA SCRIPT]문자열 검색 (0) | 2012.04.25 |
| [HTML] 웹 폰트 적용 (0) | 2012.04.25 |
| [PHP]파일 업로드 예제(Class 활용) (0) | 2012.04.25 |
| [PHP] 기초 문법 정리 (0) | 2012.04.25 |