자바스크립트 이벤트 핸들러 정리
이벤트 핸들러란 ??
- 어떠한 동작을 판별(Event)하고 그에 따른 행위(Behavior)를 결정해 주는 조절자의 역할을 한다
ex )1
<font -nMouseOver="this.color='blue'" -nMouseLeave="this.color='red'">색상변환</font><font>
태그에 마우스가 올라갔을때(onMouseOver) 마우스가 떠났을때(onMouseLeave)행위를
지정하여 글씨의 색깔을 마우스가 올라갔을 때 파랑색(blue)이 되고 마우스가 떠났을때 빨강(red)이 되게
하였다 this는 현제 엘리먼트를 가리킨다.
주요 이벤트핸들러 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 - 온로드의 반대로서 페이지를 이탈하는 경우