| |
|
자바스크립트 이벤트 .....................................................
아주 중요한 이벤트!!!
이벤트란 모든 행위를 말하는 것으로 프로그램에서는 미리 사용자의 행위를 예측하여 미리 사용할 수 있도록 이벤트를 많이 준비해 놓고 있다.
예를 들어 사용자가 마우스를 클릭할 것이다.... 이건 click 이벤트로 준비!
이게 없다면 우리는 사용자가 마우스를 클릭했는지 부터 알아내야 다음 일을 할 수 있을 것이다. 고맙게도 click이 일어났다는 걸 자동으로 알 수 있으니 얼마나 고마운 일인가...
(Click, MouseOver, MouseOut, Submit...)
이벤트 핸들러란 ?
이러한 이벤트와 우리가 준비한 프로그램을 연결해 주는 구실을 한다
(onClick,onMouseOver,onMouseOut, onSubmit...)
* 그래서 우리가 할일은 이벤트가 일어났을 때 할 일을 준비하고
이벤트 핸들러에게 그 일을 하도록 연결해 두면 되는 것이다~~~
* 익스플로러와 네비게이트 사이에 약간의 차이가 있어 익스플로러 기준으로 !!!
|
|
■ 이벤트의 종류와 의미 (이벤트핸들러는 이벤트에 on을 붙여 준다)
|
blur
|
포커스를 다른곳으로 옮길 경우 |
| click |
링크나 폼의 구성원을 클릭할 때 |
| change |
선택값을 바꿀 경우 |
| focus |
포커스가 위치할 경우 |
| mouseover |
마우스가 올라올 경우 |
| mouseout |
마우스가 떠날 경우 |
| mousedown |
마우스를 누를 경우 |
| mousemove |
마우스를 움직일 경우 |
| mouseup |
마우스를 눌렀다 놓을 경우 |
| select |
입력양식의 하나가 선택될 때 |
| submit |
폼을 전송하는 경우 |
| load |
페이지,윈도우가 브라우져로 읽혀질 때 |
| unload |
현재의 브라우저,윈도우를 떠날 때 |
| error |
문서나 이미지에서 에러를 만났을 때 |
| reset |
리셋 버튼이 눌렸을 때 |
| dbclick |
더블클릭시 |
| dragdrop |
마우스 누르고 움직일 경우 |
| keydown |
키 입력시 |
| keypress |
키 누를 때 |
| keyup |
키를 누르고 놓았을 때 |
| move |
윈도우나 프레임을 움직일 때 |
| resize |
윈도우나 프레임 사이즈를 움직일 때 |
blur()
|
입력 포커스를 다른 곳으로 이동시킴 |
| click() |
마우스 버튼이 눌러진 것처럼 해줌 |
| focus() |
입력 포커스를 준 것처럼 해줌 |
| submit() |
폼의 submit 버튼을 누른 것처럼 해줌 |
| select() |
메소드 폼의 특정 입력 필드를 선택함 |
| event.keyCode |
누른 키의 ASCII 정수 값 |
event.x
|
문서 기준 누른 좌표의 left |
| event.y |
문서 기준 누른 좌표의 top |
| event.clientX |
문서 기준 누른 좌표의 left |
| event.clientY |
문서 기준 누른 좌표의 top |
| event.screenX |
콘테이너 기준 누른 좌표의 left |
| event.screenY |
콘테이너 기준 누른 좌표의 top |
선택 목록(SELECT)
|
onBlur, onChange, onFocus |
| 문자 필드(TEXT) |
onBlur, onChange, onFocus, onSelect |
| 문자 영역(TEXTAREA) |
onBlur, onChange, onFocus, onSelect |
| 버튼(BUTTON) |
onClick |
| 체크박스(CHECKBOX) |
onClick |
| 라디오 버튼(RADID) |
onClick |
| 링크 |
onClick, onMouseover |
| RESET 버튼(RESET) |
onClick |
| SUBMIT 버튼(BUTTON) |
onClick |
| DOCUMENT |
onLoad, onUnload |
| WINDOW |
onLoad, onUnload |
| 폼(FORM) |
onSubmit |
<script language="javascript">
function TEST(){
alert("페이지 로딩시 자동 호출!")
}
</script>
<body onLoad="TEST()">
<script language="javascript">
function TEST(){
alert("Click 했군요!")
}
</script>
<font onClick="TEST()"> Click! </ font>
<script language="javascript">
function TEST(){
alert("마우스를 올리지 마세욤!")
}
</script>
<font onMouseOver="TEST()"> MouseOver</ font>
<script language="javascript">
function TEST(){
alert("현재 좌표는 " + event.x + "/" + event.y)
}
</script>
<font onClick="TEST()"> Click 좌표 </ font>
|
| * 브라우저 객체(window,document,form,image,layer,...)와 함께 사용되기 때문에 여기서는 간단하게 종류와 의미만 살펴보고!!! | |
출처 - http://www.dragoneye.co.kr/
