javascript event handle, 자바스크립트 이벤트 핸들러 속성

이벤트란 간단히 말하자면, 사용자의 행위(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')">

 

 

 

HTML 태그

JavaScript 이벤트

설명 

다양 

mouseMove 

마우스 이동

<A>..</A>

Click 

마우스로 링크를 클릭

dbClick 

마우스를 링크위에서 더블클릭

mouseDown 

마우스 버튼을 누름

mouseUp 

마우스 버튼을 놓음

mouseOver 

마우스를 링크위로 이동

mouseOut 

링크 위에 있던 마우스를 링크 밖으로 이동

keyDown 

사용자가 키를 누름

keyUp 

사용자가 키를 놓음

keyPress 

사용자가 키를 눌렀다가 놓음

<IMG>

abort 

사용자 액션으로 인해 이미지 로딩 작업을 중단함

error 

이미지 로딩하는 동안 에러 발생

load 

이미지가 로드되고 화면에 나타남

keyDown 

사용자가 키를 누름

keyUp 

사용자가 키를 놓음

keyPress 

사용자가 키를 눌렀다가 놓음

<AREA>

mouseOver 

마우스가 클라이언트측 이미지맵의 한 영역으로 이동함

mouseOut 

마우스가 이미지맵 영역 밖으로 이동

dbClick 

사용자가 이미지맵의 한 영역을 더블클릭함

<BODY>..</BODY>

Click 

사용자가 문서의 본문을 클릭

dbClick 

문서의 본문을 더블 클릭함

keyDown 

키를 누름

keyUp 

키를 놓음

keyPress 

키를 눌렀다가 놓음

mouseDown 

마우스 버튼을 누름

mouseUp 

마우스 버튼을 놓음

<BODY>..</BODY>
<FRAMESET>..</FRAMESET>
<FRAME>..</FRAME>

blur 

윈도우에서 현재 입력 포커스가 사라짐

error 

윈도우가 로드되는 동안 에러 발생

focus 

입력 포커스가 현재 윈도우로 이동

load 

윈도우 로딩이 완료됨

unload 

윈도우를 종료함

move 

윈도우가 이동됨

resize 

윈도우의 크기가 바뀜

dragDrop 

윈도우에 객체를 드롭

<FORM>..</FORM>

submit 

사용자가 폼을 제출

reset 

사용자가 폼을 재설정

<INPUT TYPE="text">

blur 

현재 입력 포커스가 텍스트 필드에서 사라짐

focus 

현재 입력 포커스가 텍스트 필드로 이동

change 

텍스트 필드가 변경되어 현재 입력 포커스가 사라짐

select 

텍스트 필드에 있는 텍스트가 선택됨

<INPUT TYPE="password">

blur 

패스워드 필드에서 입력 포커스가 사라짐

focus 

패스워드 필드에 입력 포커스 생김

<TEXTAREA>..</TEXTAREA>

blur 

텍스트 영역이 현재 입력 포커스가 사람짐

focus 

텍스트 영역에 입력 포커스 생김

change 

텍스트 영역이 변경되어 입력 포커스가 사라짐

select 

텍스트 영역에서 텍스트가 선택됨

keyDown 

키를 누름

keyUp 

키를 놓음

keyPress 

키를 눌렀다 놓음

<INPUT TYPE="button">

Click 

버튼이 클릭됨

blur 

입력할 수 없도록 버튼이 흐려짐

focus 

입력할 수 있도록 포커스 생김

mouseDown 

버튼 위에서 왼쪽 마우스 버튼 누름

mouseUp 

버튼 위에서 왼쪽 마우스 버튼 놓음

<INPUT TYPE="submit">

Click 

제출 버튼이 클릭됨

blur 

제출 버튼에서 입력 포커스가 사라짐

focus 

제출 버튼에 입력 포커스 생김

<INPUT TYPE="reset">

Click 

리셋 버튼이 클릭됨

blur 

리셋 버튼에서 포커스가 사라짐

focus 

리셋 버튼에서 포터스가 놓임

<INPUT TYPE="radio">

Click 

라디오 버튼이 클릭

blur 

라디오 버튼에서 입력 포커스가 사라짐

focus 

라디오 버튼에 입력 포커스 생김

<INPUT TYPE="checkbox">

Click 

체크 박스가 클릭

blur 

체크 박스에서 입력 포커스가 사라짐

focus 

체크 박스에 입력 포커스 놓임

<INPUT TYPE="file">

blur 

파일 업로드 폼 요소에서 입력 포커스 사라짐

change 

사용자가 업로드될 파일을 선택

focus 

파일 업로드 폼 요소에 입력 포커스 놓임

<SELECT>..</SELECT>

blur 

선택 요소가 현재 입력 포커스 잃음

change 

선택 요소가 변경되어 입력 포커스가 사라짐

focus 

선택 요소에 현재 입력 포커스가 놓임



이벤트핸들링속성

실행되는 상황

onAbort 

이미지를 로딩하는 작업이 사용자의 한 행동으로 인해 취소되었음

onBlur 

문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 사라짐

onChange 

텍스트 필드나 텍스트 영역, 파일 업로드 필드, 선택 항목이 변경되어 현재 입력 포커스가 사라짐

onClick 

링크나 클라이언트측 이미지맵 영역, 폼 요소가 클릭됨

onDbClick 

링크나 클라이언트측 이미지맵 영역, 문서가 더블 클릭됨

onDragDrop 

드래그된 객체가 윈도우나 프레임에 드롭됨

onError 

이미지나 윈도우, 프레임을 로딩하는 동안 에러가 발생함

onFocus 

문서나 윈도우, 프레임 세트, 폼 요소에 입력 포커스 놓임

onKeyDown 

키를 누름

onKeyPress 

키를 눌렀다 놓음

onKeyUp 

키를 놓음

onLoad 

이미지나 문서, 프레임이 로드됨

onMouseDown 

마우스 버튼 누름

onMouseMove 

마우스를 이동함

onMouseOut 

링크나 클라이언트측 이미지맵에서 마우스를 옮김

onMouseOver 

마우스를 링크나 클라이언트측 이미지맵으로 옮김

onMouseUp 

마우스 버튼을 놓음

onMove 

사용자가 윈도우나 프레임을 이동함

onReset 

폼의 리셋 버튼을 클릭하여 폼을 리셋시킴

onResize 

사용자가 윈도우나 프레임의 크기를 조절

onSelect 

텍스트는 텍스트 필드나 영역에서 선택됨

onSubmit 

폼이 제출됨

onUnload 

사용자가 문서나 프레임 세트를 종료함

 

이 게시물을..