[Web/JS] 자바스크립트 - 이벤트와 이벤트 처리기

✏️ 이벤트

웹 브라우저나 사용자가 행하는 어떤 동작을 말합니다. 예를 들어서 키보드에서 키를 누르는 것, 웹 브라우저에서 새로운 페이지를 불러오는 것 등이 이벤트입니다. 하지만 웹 브라우저 안에서 이루어지는 모든 동작이 이벤트는 아닙니다. 이벤트는 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서만 이루어지는 동작을 말합니다. 즉, 사용자가 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아닙니다.

 

✏️ 마우스 이벤트

종류	설명
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 버튼을 클릭했을 때 이벤트 발생

✏️ 이벤트 처리기

이벤트에서는 작은 이미지를 클릭하면 큰 이미지를 보여 주거나 폼에서 항목을 선택하면 해당 페이지로 이동하는 등 여러 가지 동작을 실행하는데, 이런 이벤트가 발생하면 처리하는 함수를 이벤트 처리기 또는 이벤트 핸들러라고 합니다. 이벤트를 처리하는 가장 기본적인 방법은 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결하는 것입니다. 기본형 => <태그 on이벤트명 = "함수명">

<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Orange</a></li>
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Purple</a></li>