이벤트와 이벤트 핸들러 정리

웹 상에서 발생하는 이벤트들을 정리 해 본다.

마우스 이벤트

마우스 조작 시 발생하는 이벤트

종류	설명
click	html 요소를 클릭할 때 이벤트 발생
dbclick	html 요소를 더블 클릭할 때 이벤트 발생
mousedown	마우스 버튼을 눌렀을 때 이벤트 발생
mousemove	마우스 포인터를 움직였을 때 이벤트 발생
mouseover	마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생
mouseout	마우스 포인터가 요소에서 벗어났을 때 이벤트 발생
mouseup	마우스 버튼을 눌렀다가 떼었을 때 이벤트 발생

키보드 이벤트

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

종류	설명
keydown	키보드 키를 누르는 동안 이벤트 발생
keypress	키보드 키를 눌렀을 때 이벤트 발생
keyup	키보드 키를 눌렀다가 뗄 때 이벤트 발생

문서로딩 이벤트

서버에서 웹 문서를 가져오거나 조작하였을 때 발생하는 이벤트

종류	설명
abort	문서가 모두 로딩되기 전 로딩을 멈췄을 때 발생
error	문서가 정확히 로딩이 되지 않았을 때 발생
load	문서 로딩이 끝나면 발생
resize	문서 화면의 크기가 바뀌었을 때 이벤트 발생
scroll	문서가 스크롤 될때 이벤트 발생
unload	문서에서 벗어날때 이벤트 발생

폼 이벤트

폼 요소에 입력이 생기거나 변경이 생겼을 때 발생하는 이벤트

종류	설명
blur	폼 요소에서 포커스를 잃었을 때 이벤트 발생
change	목록이나 체크 상태 등이 변경 되면 발생
focus	요소에 포커스가 놓였을 때 이벤트 발생
reset	폼이 리셋 되었을 때 발생
submit	submit 버튼을 클릭 했을 때 발생

이벤트 핸들러 (이벤트 처리기)

이벤트가 발생하면 실행 하는 동작 정의

1. 직접 연결 하기
   HTML 에서 직접 연결 하는 방식
   예)

   <a href="#" onclick="alert('click!')"> click me! </a>

2. DOM 으로 연결 하기
   자바스크립트에서 선택자를 통해 언어온 값에 이벤트 연결 하기
   예)

   var a = document.querySelector("#test");
   a.onclick = changeValue;
   
   function changeValue(){
       document.querySelector("p").style.color = "#fff";
   }