[JavaScript] 이벤트와 각종 이벤트 처리기

 

오늘은 이벤트와 각종 이벤트 처리기에 대해 알아보자

 

 

[ 이벤트 ] 

 

이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 말한다.

예를 들어 키보드에서 키를 누르는 것도, 웹 브라우저에서 새로운 페이지를 불러오는 것도 이벤트이다.

 

하지만, 웹 브라우저 안에서 이루어지는 모든 동작이 이벤트는 아니다. 

이벤트는 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 말한다. 

따라서 사용자가 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다. 

예를 들어 브라우저 창 맨 위의 제목 표시줄을 클릭하는 것은 이벤트라고 하지 않는다. 

 

자바스크립트의 이벤트는 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생한다. 

 

 

 

[ 마우스 이벤트 ] 

 

마우스 이벤트는 마우스를 이용해서 버튼이나 휠 버튼을 조작할 때 발생한다. 

 

종류	설명
click	사용자가 HTML 요소를 클릭할 때 이벤트가 발생한다.
dbclick	사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생한다.
mousedown	사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다.
mousemove	사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생한다.
mouseover	마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생한다.
mouseout	마우스 포인터가 요소를 벗어날 때 이벤트가 발생한다.
mouseup	사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트가 발생한다.

 

 

[ 키보드 이벤트 ]

 

키보드 이벤트는 키보드에서 특정 키를 조작할 때 발생한다. 

 

종류	설명
keydown	사용자가 키를 누르는 동안 이벤트가 발생한다.
keypress	사용자가 키를 눌렀을 때 이벤트가 발생한다.
keyup	사용자가 키에서 손을 뗄 때 이벤트가 발생한다.

 

 

[ 문서 로딩 이벤트 ]

 

서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여 주는 것과 관련된 이벤트이다.

 

종류	설명
abort	문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생한다.
error	문서가 정확히 로딩되지 않았을 때 이벤트가 발생한다.
load	문서 로딩이 끝나면 이벤트가 발생한다.
resize	문서 화면 크기가 바뀌었을 때 이벤트가 발생한다.
scroll	문서 화면이 스크롤되었을 때 이벤트가 발생한다.
unload	문서에서 벗어날 때 이벤트가 발생한다.

 

 

[ 폼 이벤트 ]

 

폼은 로그인, 검색, 게시판, 설문 조사처럼 사용자가 입력하는 모든 요소를 가리킨다.

 

종류	설명
blur	폼 요소에 포커스를 잃었을 때 이벤트가 발생한다.
change	목록이나 체크 상태 등이 변경되면 이벤트가 발생한다.  주로 input, select, textarea 태그에서 사용한다.
focus	폼 요소에 포커스가 놓였을 때 이벤트가 발생한다. label, select, textarea, button 태그에서 사용한다.
reset	폼이 리셋되었을 때 이벤트가 발생한다.
submit	submit 버튼을 클릭했을 때 이벤트가 발생한다.