이벤트란 사용자가 마우스를 클릭하고, 키보드를 누르는 등 컴퓨터에 입력하는 모든 행위를 말한다. 즉, 사용자가 컴퓨터에게 어떠한 행위를 하도록 명령을 하면 컴퓨터는 그 행동에 대한 응답을 하는 것을 말한다.
윈도우 환경에서 이벤트가 발생하고 이벤트에 따라 프로그램을 처리해 나가는 것을 이벤트 핸들러라 부르며, 자바 스크립트는 이벤트를 감지하고 이벤트에 따라 프로그램을 수행할 수 있도록 이벤트 핸들러를 지원한다.
1. Window Event
웹 브라우저 창에서 발생하는 이벤트로 웹 브라우저 창에서 문서를 읽거나 일지 않을 때 발생하는 이벤트이다. 적용할 수 있는 태그는 <body>와 <frame>가 있다.
- onload = '스크립트코드' (문서가 로드될 때 발생)
- onunload = '스크립트코드' (문서가 언로드될 때 발생)
2. form event
폼 태그 요소에서 발생하는 이벤트로 <form> 태그에서만 사용 가능한 이벤트이다.
- onsubmit = 'return 스크립트 함수' (submit이 발생할 때 실행되는 이벤트)
- onreset = '' (reset이 발생할 때 실행되는 이벤트)
폼 이벤트에서 return을 사용하면 자바 함수의 리턴값을 기준으로 서밋이 되거나 취소된다. 스크립트 함수의 반환값이 true일 경우 폼데이터는 submit이 되며, 반환값이 false일 경우 submit이 취소된다.
또한 입력 필드( <input> )에서 사용가능한 이벤트가 있는데 종류는 다음과 같다.
- onchange = '' (입력폼의 데이터가 변경될 때 발생되는 이벤트)
- onselect = '' (셀렉트 박스 엘레멘트에서 선택이 발생될 때)
- onblur = '' (입력폼에서 포커스를 잃어 버릴 때 발생되는 이벤트)
- onfocus = '' (입력폼에서 포커스를 얻을 때 발생되는 이벤트)
3. keyboard event
키보드의 입력이 발생하면 발생되는 이벤트로 문서를 구성하는 태그에서만 사용 가능하고 그 외의 태그에서는 사용이 불가능하다. 사용아 불가능한 태그로는 <head>, <meta>, <br> 등이 있다. 키보드 이벤트의 종류는 다음과 같다.
- onkeydown = '' (키가 눌렸을때 발생되는 이벤트)
- onkeypress = '' (키가 눌렸거나 반납될 때 발생되는 이벤트)
- onkeyup = '' (키가 반납될 때 발생되는 이벤트)
4. mouse event
마우스의 입력이나 움직임이 발생되면 발생하는 이벤트이다. 마우스 이벤트는 키보드 이벤트와 발생하는 태그가 같다. 즉, 문서를 구성하는 태그에만 사용 가능하고 그 외의 태그에서는 사용이 불가능하다. 마우스 이벤트의 종류는 다음과 같다.
- onclick = '' (마우스 클릭시 발생하는 이벤트)
- ondbclick = '' (마우스 더블 클릭시 발생하는 이벤트)
- onmousedown = '' (마우스 버튼이 눌렸을 경우 발생하는 이벤트)
- onmousemove = '' (마우스 포인터가 이동했을 경우 발생하는 이벤트)
- onmouseout = '' (마우스 포인터가 태그 영역을 벗어났을 경우 발생하는 이벤트)
- onmouseover = '' (마우스 포인트가 태그 영역위에 있을 경우 발생하는 이벤트)
- onmouseup = '' (마우스 버튼이 반환될 때 발생하는 이벤트)
■ HTML 문서에 이벤트 핸들러 사용하기
HTML 문서에 자바 스크립트 이벤트 핸들러를 사용하기 위해서는 해당 태그 요소에 사용할 이벤트 속성을 추가해야 한다. 만약, 링크에 클릭시 이벤트를 발생시키고 해당하는 스크립트 코드를 수행하기 위한 코드는 다음과 같다.
이와 같은 방식으로 이벤트 속성을 태그 속성에 포함시키고 스크립트 코드와 연결시켜야 이벤트 핸들러를 사용할 수 있다.
※ submit이 발생할 때 자바 스크립트 함수를 실행시켜 결과 여부에 따라 서밋 수행여부 결정하기
참고로 submit이 발생할 때 자바 스크립트 함수를 실행시켜 결과 여부에 따라 서밋 수행여부를 결정하기 위해서는 <form>태그에 submit 이벤트를 지정하거나 <input>태그에 type 속성의 값이 submit인 태그에 onclick 속성에 return를 참고하도록 해야 한다.
또는
이렇게 return를 사용하면 함수의 리턴값을 기준으로 이벤트 처리 여부를 결정하게 된다.
'Java Script & DOM > Java Script ' 카테고리의 다른 글
| 자바스크립트 - 문자열(String) 객체 (0) | 2010.11.25 |
|---|---|
| 자바스크립트 - tyr...catch 문, throws 문 (0) | 2010.11.25 |
| 자바스크립트 - 반복문 (0) | 2010.11.25 |
| 자바스크립트 - 함수(function) (0) | 2010.11.25 |
| 자바스크립트 - 팝업박스 (0) | 2010.11.25 |