자바스크립트 이벤트 .....................................................
아주 중요한 이벤트!!!
이벤트란 모든 행위를 말하는 것으로 프로그램에서는 미리 사용자의 행위를 예측하여 미리 사용할 수 있도록 이벤트를 많이 준비해 놓고 있다.
예를 들어 사용자가 마우스를 클릭할 것이다.... 이건 click 이벤트로 준비!
이게 없다면 우리는 사용자가 마우스를 클릭했는지 부터 알아내야 다음 일을 할 수 있을 것이다. 고맙게도 click이 일어났다는 걸 자동으로 알 수 있으니 얼마나 고마운 일인가...
(Click, MouseOver, MouseOut, Submit...)
이벤트 핸들러란 ?
이러한 이벤트와 우리가 준비한 프로그램을 연결해 주는 구실을 한다
(onClick,onMouseOver,onMouseOut, onSubmit...)
* 그래서 우리가 할일은 이벤트가 일어났을 때 할 일을 준비하고
이벤트 핸들러에게 그 일을 하도록 연결해 두면 되는 것이다~~~
* 익스플로러와 네비게이트 사이에 약간의 차이가 있어 익스플로러 기준으로 !!!
|
|
| 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,...)와 함께 사용되기 때문에 여기서는 간단하게 종류와 의미만 살펴보고!!! |
"Java Script" 카테고리의 다른 글
[2008/03/25] JavaScript1.2 String 메소드 문자열 ... [2009/01/29] 이미지 첨부할때, 가로 세로 크기 제한 하려면?? [2007/12/05] 웹에디터 모듈 제공 업체 [2008/06/10] 새창자동으로 띄우고 화면중앙정렬 [2008/07/18] 로그인 할 때 쿠키로 아이디 저장하기 [2008/07/15] 레이어 셀렉트메뉴 [2007/11/13] 하루동안 공지 창 띄우기 않기 [2009/10/11] 자주 쓰이는 JavaScript [2008/09/10] document와 form에 id,name가져오기 [2008/10/26] 자바스크립트 정규표현식
