[JavaScript] Event 와 Event처리기

▶ 마우스 Event

마우스의 버튼, 휠을 조작할 때 나타나는 이벤트이다.

속성	설명
click	사용자가 HTML 요소를 마우스로 눌렀을 때 이벤트가 발생한다.
dblclick	사용자가 HTML 요소를 마우스로 두 번 눌렀을 때 이벤트가 발생한다.
mousedown	사용자가 요소 위에서 마우스 버튼을 누르는 동안 이벤트가 발생한다.
mousemove	사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생한다.
mouseover	마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생한다.
mouseout	마우스 포인터가 요소를 벗어날 때 이벤트가 발생한다.
mouseup	사용자가 누르고 있던 마우스 버튼에서 손을 뗄 때 이벤트가 발생한다.

 

▶ 키보드 Event

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

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

 

▶ 문서 로딩 Event

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

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

 

▶ 폼 Event

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

속성	설명
blur	폼 요소에 포커스를 잃었을 때 이벤트가 발생한다.
change	목록이나 체크 상태 등이 변경되었을 때 이벤트가 발생한다. <input>,<select>,<textarea> 태그에서 사용.
focus	폼 요소에 포커스가 놓였을 때 이벤트가 발생한다. <label>,<select>,<textarea>,<button> 태그에서 사용.
reset	폼이 다시 시작되었을 때 이벤트가 발생한다.
submit	submit 버튼을 눌렀을 때 이벤트가 발생한다.

 

▶ Event 처리기

이벤트가 발생할 때 어떤 함수가 발생할지 웹 브라우저에 알려주어야 하는데, 이때 이벤트와 이벤트 처리 함수를 연결해 주는 것을 '이벤트 처리기' 또는 '이벤트 핸들러(XSS에서 활용할 수도 있음.)'라고 한다. 이벤트 처리기는 이벤트 이름 앞에 on을 붙여서 사용한다.(ex. onmouseover, onclick..)