자바스크립트에서 이벤트핸들러란 무엇인가?

이벤트(Event)는 사건이요.
이벤트핸들러(Event Handler)는 이 사건(Event)을 판별하고 그에 따른 행위(Behavior)를 결정해주는 조절자의 역할을 한다.

이벤트라는 것은 예를 들자면 마우스오버(특정한 곳에 커서가 올라감),  키프레스(키를 누름) 등이 있을 수 있다.
자바스크립트에서 이벤트핸들러를 예를들면 onMouseOver란 마우스가 오버된 것을 확인하여 그에 해당하는 작업을 수행해주는 역할을 한다. 


백문이 불여일견 아래의 예를 통해 이벤트핸들러의 사용법을 살펴보도록 하자


<FONT onMouseOver="this.color='blue'" onMouseLeave="this.color='red'">색상변환</FONT>

<font>태그에 마우스가 올라갔을 때(onMouseOver) 마우스가 떠났을 때(onMouseLeave) 행위를 지정하여
글씨의 색깔을 마우스가 올라갔을 때 파랑색(blue)이 되고 마우스가 떠났을 때 빨강색(red)이 되게 하였다.
this는 현재 엘리먼트를 가리킨다.(여기서는 FONT)


아래는 위 소스의 결과물이다.


========
색상변환
=======



이벤트 핸들러에 대한 설명은 이정도로 하고 이벤트핸들러를 소개한다.


주요 이벤트핸들러 List


Mouse Events

onClick
 - 마우스로 해당 엘리먼트를 클릭함

onDblClick
 - 마우스로 해당 엘리먼트를 더블클릭함

onMouseDown
 - 마우스를 누름(클릭은 마우스를 눌렀다 때는 것으로 구별됨)

onMouseMove
 - 마우스가 엘리먼트 위에서 이동함

onMouseOut
 - 마우스가 엘리먼트에서 벗어남

onMouseUp
 - 마우스를 뗌(MouseDown과 반대됨 버튼을 누른 상태에서 떼는 경우)




Keyboard Events

onKeyDown
 - 키보드 버튼을 누르고 있는 경우 (어떤 키인지 읽으려면 함수를 호출하여 event.KeyCode를 참고해야 한다)

onKeyPress
 - 키보드 버튼을 눌렀 땐 경우 ( 마우스의 클릭과 유사)

onKeyUp
 - 키보드 버튼을 누르고 있다가 땐 경우 ( MouseUp과 유사)




HTML Control Events

onBlur
 - 엘리먼트가 Focus(초점)를 잃음. 예를 들어 버튼을 클릭하면 포커스(점선테두리로 보임)가 버튼에 잡혀있는데 이 때 다른 것을 클릭하거나 탭등으로 포커스를 이동할 경우를 의미함.

onChange
 - 엘리먼트에서 특정 내용을 선택 혹은 변경하는 경우. 셀렉트박스(select box)에서 선택된 아이템을 변경하는 경우가 이에 해당됨

onFocus
 - 엘리먼트에 초점이 맞춰지는 경우

onReset
 - 리셋 이벤트가 발생하는 경우. 대표적으로 input box의 타입 reset이 적용될 때이다.

onSelect
 - 엘리먼트내 문자열을 블럭화 할 경우(즉 드래그 혹은 쉬프트+방향키등으로 문자열에 블럭을 씌우는 경우이다)

onSubmit
 - 폼(Form)태그내에서 전송(Submit) 이벤트가 발생하는 경우




Window Events

onLoad
 - 페이지나 이미지등의 엘리먼트가 로딩이 완료되는 경우

onResize
 - 윈도우나 프레임의 사이즈가 변경되는경우

onUnLoad
 - 온로드의 반대로서 페이지를 이탈하는 경우


이 게시물을..