1. 자바스크립트 이벤트 종류 (타입)
※ 전체 이벤트 종류/분류 및 설명이 잘 정리된 참고문헌 ☞ MDN web docs 참조
※ jQuery 관련으로는, ☞ jQuery 이벤트 참조
2. 기본 이벤트
ㅇ 요소에 개발자가 굳이 이벤트를 연결하지 않았음에도 기본적으로 실행되는 이벤트
- a 요소를 클릭 => 해당 경로로 페이지 이동
- 브라우저 화면에서 우측 마우스 버튼을 클릭 => ContextMenu 나타남
- form 요소 내 submit 버튼을 클릭 => 지정된 경로로 내용을 전송함
3. 마우스 이벤트
ㅇ click (onclick) : 마우스 버튼 클릭하고 버튼에서 손을 뗌
- 例) 요소.onclick = "이벤트 처리기";
- 例) 요소.addEventListener("click", 이벤트 처리기 또는 콜백함수);
ㅇ dblclick (ondbclick) : 마우스 버튼을 두 번 연속 더블 클릭 함
ㅇ mousedown (onmousedown) : 마우스 클릭의 앞 절반 (버튼을 누름)
ㅇ mouseup (onmouseup) : 마우스 클릭의 뒤 절반 (버튼을 뗌)
- 드래그 앤 드롭 이벤트 : 위 두 이벤트(mousedown, mouseup)로도 구현 가능
ㅇ mouseover (onmouseover) : 마우스 포인터가 요소 위에 올라감
ㅇ mouseout (onmouseout) : 마우스 포인터가 요소 밖으로 벗어남
ㅇ mousemove (onmousemove) : 마우스 포인터가 움직임
- 마우스 커서가 해당 요소 내를 움직일 때
- 또는, 커서의 위치 확인에 유용함
ㅇ contextMenu : 마우스 우측 클릭시, 컨텍스트 메뉴 보이기 직전에 발생
ㅇ 마우스 휠 이벤트 등
4. 드래그 앤 드롭 이벤트
ㅇ dragstart
ㅇ drag
ㅇ dragend
ㅇ dragenter
ㅇ dragover
ㅇ dragleave
ㅇ drop
5. 키보드 이벤트
ㅇ keydown (onkeydown) : 키를 누르는 순간
ㅇ keyup (onkeyup) : 키를 눌렀다 떼는 순간
ㅇ keypress (onkeypress) : 키를 눌러 문자가 연결되었을 때
- 즉, 화면에 글자가 완성되는 경우 만
- 한편, 누르고있는 동안 화면에 해당 키가 연이어 나타나듯이 해당 이벤트도 계속 발생됨
6. 폼 이벤트
ㅇ submit (onsubmit) : 폼 제출 버튼을 누름
- 제출/전송 버튼을 누름 또는 텍스트 필드에서 엔터키를 누름
ㅇ reset (onrest) : 폼을 초기화하기 위함
ㅇ change (onchange) : 폼 필드에서 변경이 일어남
- input 요소의 텍스트 변동, radio 버튼의 클릭 등
ㅇ focus (onfocus) : 웹브라우저가 특정 요소에 집중함
- 해당 요소를 클릭, 마우스 커서를 놓을때 등
ㅇ blur (onblur) : focus의 반대
- 탭 누름, 필드 밖을 클릭할 때 등
ㅇ select (onselect) : 텍스트 필드 등의 텍스트를 선택했을 때
7. 값 변경 이벤트
ㅇ input (oninput) : 값이 입력될 때
- input (text,checkbox,radio), select, textarea 요소내 값이 입력될 때
ㅇ change (onchange) : 폼 필드에서 변경이 일어남
- input 요소의 텍스트 변동, radio 버튼의 클릭 등
- input (text,checkbox,radio), select, textarea 요소내 값이 변경될 때
ㅇ readystatechange : document.readyState 프로퍼티 값이 변경될 때
- (`loading`,`interactive`,`complete`)
8. 문서(document)/창(window) 이벤트
ㅇ load (onload) : HTML 문서 및 추가 자원(이미지 등)들을 `모두 불러왔을 때` 발생
ㅇ DOMContentLoaded : HTML 문서를 읽고 `DOM 트리 구축을 완료할 때` 발생
- 위 load와 달리, 이미지 로드,스타일시트 등을 기다리지 않고 바로 시작
ㅇ readystatechange (onreadystatechange) ☞ XHR 프로퍼티 참조
ㅇ timeout (ontimeout)
ㅇ resize (onresize) : 요소 크기의 변동시
- 창의 최대화 버튼 또는 창의 크기를 조절
ㅇ scroll (onscroll) : 페이지 스크롤 이동
- 스크롤바를 드래그하거나 또는 키보드(위/아래/home/end 등) 또는 마우스휠 사용
ㅇ unload (onunload) : 해당 페이지를 벗어남
- 다른 페이지로의 링크를 클릭, 브라우저 탭/창을 닫음 등
9. 기타 이벤트
ㅇ 텍스트 입력 이벤트
ㅇ hashchange 이벤트 : 해시 변경시 이벤트 발생
- [참고] ☞ location 객체 참조
- [참고] ☞ MDN web docs, w3schools 참조
ㅇ error (onerror) : 에러 발생 이벤트