자바스크립트 이벤트와 이벤트핸들러

자바스크립가 실행되는 시기를 클릭, 문서 로딩, 드래깅과 같은 사용자의 행위에 따라 정해 줄 수 있는데 이 때 사용하는 것이 이벤트 핸들러입니다.

이벤트핸들러와 이벤트의 차이점을 비교해보고 자바스크립트와 함께 사용해봅시다.

이벤트와 이벤트핸들러

사용자가 마우스를 움직이거나 키를 누르는 등의 동작을 이벤트라 합니다.

이 앞에 on을 붙이면 이벤트핸들러가 되는데, 이것은 '이벤트가 발생했을 때'로 해석할 수 있습니다.

이렇게 이벤트는 행위를 발생시키는 것이고, 이벤트핸들러는 이벤트의 발생 여부에 따라 지정된 함수나 명령을 수행하는 것입니다.

이벤트와 이벤트핸들러의 종류

이벤트(이벤트핸들러)	설명
마우스관련	사용자가 마우스를 조작할 때 발생
click(onClick)	창, 버튼 등을 클릭했을 때
dblclick(onDbclick)	마우스를 더블클릭 했을 때
mouseover(onMouseover)	링크나 그림 위로 마우스가 올라갈 때
mouseout(onMouseout)	마우스가 링크나 그림 영역에서 벗어낫을 때
mousedown(onMousedown)	마우스 버튼을 누르는 순간
mouseup(onMouseup)	마우스 버튼을 눌렀다가 때는 순간
mousemove(onMousemove)	마우스가 위치를 옮겼을 때
dragdrop(onDragdrop)	마우스를 클릭한 상태에서 이동했을 때
포커스 관련	커서가 도착했을 때 발생
focus(onFocus)	커서가 위치할 때
blur(onBlur)	커서를 잃어버렸을 때
키보드 관련	키보드에 입력이 있을 때 발생
keydown(onKeydown)	키보드의 키를 누를 때
keypress(onKeypress)	키보드의 키를 누르는 순간
keyup(onKeyup)	키보드의 키를 눌렀다가 때는 순간
폼 관련	폼 문서에서 발생
submit(onSubmit)	전송 버튼을 눌러 폼 문서를 제출할 때
reset(onReset)	입력 양식을 초기화 할때
select(onSelect)	입력 상자의 문자열이나, 체크상자, 라디오버튼을 선택할 때
change(onChange)	입력 양식의 값이 바뀌엇을때, 목록상자의 항목을 변경 했을 때
윈도우 관련	윈도우에서 발생
load(onLoad)	브라우저에서 문서를 읽어올 때
unload(onUnload)	브라우저의 문서를 닫을 때
move(onMove)	프레임이나 브라우저를 이동했을 때
resize(onResize)	프레임이나 브라우저의 크기를 변경했을 때
그림 관련	그림이나 문서에서 발생
abort(onAbort)	그림을 읽는 도중 중지했을 때
error(onError)	문서나 그림을 읽는 도중 중지 했을 때

아이디:

비밀번호 :

입력상자 :