자바스크립트 이벤트 .....................................................
아주 중요한 이벤트!!!
이벤트란 모든 행위를 말하는 것으로 프로그램에서는 미리 사용자의 행위를 예측하여 미리 사용할 수 있도록 이벤트를 많이 준비해 놓고 있다.
예를 들어 사용자가 마우스를 클릭할 것이다.... 이건 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" 카테고리의 다른 글
[2007/12/27] IFRAME auto resizer [2009/04/02] JavaScript for Limit Byte (자바... [2008/03/26] javascript(*.js) 파일 Style she... [2008/10/08] [JavaScript] IE6 웹에서 png 투명파일... [2007/12/05] 웹에디터 모듈 제공 업체 [2008/07/09] OFCJS (Open Flash Chart) [2008/09/10] 부모창에서 사용자가 이동할때 팝업창 자동으로 닫히게 하기 [2008/01/18] js :: 팝업메뉴 생성하기 [2007/12/27] 구글 개인화와 같은 드래그&드랍 [2008/07/15] 레이어 셀렉트메뉴





