자바스크립트 이벤트 핸들러(Event Handler)란?
이벤트핸들러는 영어 뜻풀이 그대로 "어떠한 사건에 대한 동작을 다룬다"라는 의미입니다.
웹에서 링크에 마우스를 갖다대면 색이 파랗게 바뀌거나 버튼을 클릭하면 경고창을 띄운다던가 ,브라우저를 열면 내용을 읽어들이고 닫기버튼을 누르면 닫히는 것들이 다 이벤트 핸들러입니다.
이벤트핸들러 개념은 간단합니다.
"마우스가 버튼에 닿았을 때"는 사건(Action)입니다.
"마우스가 버튼에 닿으면 버튼 색깔이 파란색으로 변한다"는 사건에대한
동작
입니다.
이 두개를 묶은것이 이벤트 핸들러입니다.
표로 정리된 핸들러종류들을 살펴보겠습니다.
이벤트 핸들러의 종류 출처) http://blog.naver.com/jhm0298/60073393931
| 이벤트 | 이벤트 핸들러 | 설 명 |
| abort | OnAbort | 이미지를 읽다가 중단했을 경우 |
| blur | OnBlur | 대상에서 포커스가 이동되었을 경우 |
| change | OnChange | 대상에 입력되어 있는 값이 바뀌었을 경우 |
| click | OnClick | 대상을 클릭했을 경우 |
| dbclick | InDbclick | 대상을 더블클릭했을 경우 |
| dragdrop | OnDragDrop | 대상을 클릭한 상태에서 이동했을 경우 |
| error | OnError | 에러가 발생했을 경우 |
| focus | OnFocus | 대상에 포커스가 들어 왔을 경우 |
| Keydown | OnKeyDown | 키가 눌러질 경우 |
| keyprss | OnKeyPress | 화면에 출력되는 키가 눌러질 경우 |
| keyup | OnKeyUp | 키를 눌렀다가 놓았을 경우 |
| load | OnLoad | 대상을 열었을 경우 |
| mousedown | OnMouseDown | 마우스 단추를 눌렀을 경우 |
| mousemove | OnMouseMove | 마우스를 움직였을 경우 |
| mouseout | OnMouseOut | 대상에서 마우스 포인터가 벗어났을 경우 |
| mouseover | OnMouseOver | 대상에 마우스 포인터가 위치했을 경우 |
| mouseup | OnMouseUp | 마우스 포인터를 위치했다가 벗어났을 경우 |
| move | OnMove | 윈도우나 프레임을 움직였을 경우 |
| reset | OnReset | 대상을 재시작 시켰을 경우 |
| resize | OnResize | 윈도우나 프레임의 크기가 변경했을 경우 |
| select | OnSelect | 입력 양식의 한 필드를 선택했을 경우 |
| submit | OnSumit | 입력 양식을 서버로 보냈을 경우 |
| unload | OnUnload | 대상을 종료했을 경우 |
자바스크립트 이벤트 핸들러(Event Handler) 활용
위에 표에서 onclick이라는 핸들러를 사용해보겠습니다.
마우스로 버튼을 클릭했을 때 "onClick Event Handler"라는 메시지 창을 화면에 띄우도록 해볼게요.
<script type="text/javascript">
function func(){
alert("onClick Event Handler");
}
</script>
<html>
<body>
<input type="button" value="test_button" onclick="func()">
</body>
</html>
input type="button" 버튼타입
value="test_button" 버튼이름
다음 포스팅에서는 글자에 마우스를 갖다대면 글자색이 랜덤으로 바뀌는걸 해보겠습니다.
다음편 [개발/웹(html,javascript)] - 자바스크립트(javascript) 글자색을 무작위로 바꿔보자
'프로그래밍 > 웹' 카테고리의 다른 글
| html 프레임을 이용해서 페이지분할하기 (0) | 2017.06.02 |
|---|---|
| 로그인 폼 작성 (0) | 2017.06.02 |
| 버튼으로 배경색과 글자색 바꾸기 (0) | 2017.06.02 |
| 이벤트 팝업창 띄우기 (0) | 2017.06.01 |
| 자바스크립트(javascript) 글자색을 무작위로 바꿔보자 (0) | 2017.05.02 |
