이벤트 객체
출처 : http://deadfire.hihome.com/jscript/jscript21.html
이벤트란 간단히 말하자면, 사용자의 행위(Action)를 말한다. 즉, 버튼을 누르거나, Text에 글자를 쳐 넣거나, 브라우저가 새로운 문서를 읽어 들이거나, 브라우저를 닫거나 하는 것들이 바로 이벤트인 것이다.
초기에 웹 환경, 정확히 말하자면, HTML에서는 이러한 것이 없었다. 그래서, 사용자의 입력에 반응하지 못함에 따라 웹 서버와 네트워크에 부하를 주었던 것이다. 그러한 문제 때문에 자바스크립트가 추가되면서 이러한 문제점을 줄여주었던 것이다.
자바스크립트를 HTML문장에 사용할 수 있게 되면서, 사용자의 행동에 따라 적절한 조치를 취할 수 있게 됨에 따라 HTML 문서의 내용만을 단순히 보여주는 브라우저환경을 벗어날 수 있게 된 것이다.
즉, 자바스크립트가 이벤트를 처리(Handle)하게 됨에 따라 HTML문서가 보다 동적인(Dynamic) 페이지가 될 수 있었다. 대부분 이벤트가 발생하면, 이 이벤트를 처리(Handle)할 수 있는 함수를 만들어서 해당 이벤트에 대응하게 하는데, 이렇게 이벤트와 처리함수를 묶어주는 것을 이벤트 핸들러(Event Handler)라고 부른다.
다음은 이벤트의 종류와 그에 대한 설명이다.
위의 이벤트는 앞에서 말한 대로 사용자가 발생을 시킨다. 그럼 그 이벤트에 해당하는 함수를 어떻게 대응시키는가 배워야 하겠다. 즉, 이벤트 핸들러를 사용하는 방법부터 알아보자.일반적으로 이벤트 핸들러는 이벤트명 앞에 단순히 on을 붙이면 된다. 즉, Click 이벤트를 잡아내고 싶으면 onClick이라고 하면 Click이벤트 핸들러가 되는 것이다. 이벤트는 특정한 HTML요소 즉, HTML Tag에서 발생되는 것이기 때문에 다음과 같이 표기한다.
하나의 HTML 요소에 여러개의 이벤트 핸들러를 지정할 수도 있다.
이벤트란 간단히 말하자면, 사용자의 행위(Action)를 말한다. 즉, 버튼을 누르거나, Text에 글자를 쳐 넣거나, 브라우저가 새로운 문서를 읽어 들이거나, 브라우저를 닫거나 하는 것들이 바로 이벤트인 것이다.
초기에 웹 환경, 정확히 말하자면, HTML에서는 이러한 것이 없었다. 그래서, 사용자의 입력에 반응하지 못함에 따라 웹 서버와 네트워크에 부하를 주었던 것이다. 그러한 문제 때문에 자바스크립트가 추가되면서 이러한 문제점을 줄여주었던 것이다.
자바스크립트를 HTML문장에 사용할 수 있게 되면서, 사용자의 행동에 따라 적절한 조치를 취할 수 있게 됨에 따라 HTML 문서의 내용만을 단순히 보여주는 브라우저환경을 벗어날 수 있게 된 것이다.
즉, 자바스크립트가 이벤트를 처리(Handle)하게 됨에 따라 HTML문서가 보다 동적인(Dynamic) 페이지가 될 수 있었다. 대부분 이벤트가 발생하면, 이 이벤트를 처리(Handle)할 수 있는 함수를 만들어서 해당 이벤트에 대응하게 하는데, 이렇게 이벤트와 처리함수를 묶어주는 것을 이벤트 핸들러(Event Handler)라고 부른다.
다음은 이벤트의 종류와 그에 대한 설명이다.
| 이벤트명 | 발생대상 | 설 명 |
| Abort | image | 이미지를 로딩하다가 멈추었을 때 |
| Blur | window, form element | 입력 포.커.스가 이동할 때 |
| Change | text, textarea, select | 내용이 변경되었을 때 |
| Click | button, radio, checkbox, submit, reset | 마우스가 눌렸을 때 |
| DblClick | button, radio, checkbox, submit, reset | 마우스가 두번눌렸을 때 |
| DragDrop | window | 마우스를 누른 상태로 움직였을 때 |
| Error | image, window | 문서나 이미지를 로딩하다 멈췄을 때 |
| Focus | window, form element | 입력 포.커.스를 받았을 때 |
| KeyDown | document, image, link, text | 키보드로 값을 입력했을 때 |
| KeyPress | document, image, link, text | 키보드가 눌렸을 때 |
| KeyUp | document, image, link, text | 키보드가 눌렸다 놓았을 때 |
| Load | document | 문서를 로딩을 완료했을 때 |
| MouseDown | document, button, link | 마우스가 눌렸을 때 |
| MouseMove | all | 마우스가 움직일 때 |
| MouseOut | image map, link | 마우스가 빠져나갈 때 |
| MouseOver | link | 마우스 포인터가 올라왔을 때 |
| MouseUp | document, button, link | 마우스를 눌렀다 놓았을 때 |
| Move | window | 브라우저를 이동시킬 때 |
| Reset | form | form 태그 중 reset버튼을 눌렀을 때 |
| Resize | window | 브라우저의 사이즈를 변경할 때 |
| Select | text, textarea | 입력창을 선택했을 때 |
| Submit | form | form값을 전송할 때 |
| Unload | document | 브라우저가 현재 문서에서 빠져나갈 때 |
위의 이벤트는 앞에서 말한 대로 사용자가 발생을 시킨다. 그럼 그 이벤트에 해당하는 함수를 어떻게 대응시키는가 배워야 하겠다. 즉, 이벤트 핸들러를 사용하는 방법부터 알아보자.일반적으로 이벤트 핸들러는 이벤트명 앞에 단순히 on을 붙이면 된다. 즉, Click 이벤트를 잡아내고 싶으면 onClick이라고 하면 Click이벤트 핸들러가 되는 것이다. 이벤트는 특정한 HTML요소 즉, HTML Tag에서 발생되는 것이기 때문에 다음과 같이 표기한다.
<TAG eventHandler="처리할 실제함수명();">실제 예로, 간단히 Form Tag중에 Button을 예로 들면,
<INPUT TYPE="button" VALUE="Click Me" onClick="func();">와 같이 사용하면 된다. 이렇게 이벤트 핸들러에는 함수나 다른 자바스크립트 코드가 올 수 도 있다. 자바스크립트 코드가 여러 개 올 경우에는 반드시 세미콜론(;)을 넣어주어야 하지만, 위의 예처럼 하나의 문장인 경우는 세미콜론을 생략할 수도 있다.
하나의 HTML 요소에 여러개의 이벤트 핸들러를 지정할 수도 있다.
<TAG onClick="alert('Click')" onFocus="alert('Focus')">
[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌