✅ 1. 마우스 이벤트 (Mouse Events)

이벤트 이름 설명
click 요소를 클릭할 때 발생
dblclick 요소를 더블클릭할 때 발생
mousedown 마우스 버튼을 누를 때 발생
mouseup 마우스 버튼을 뗄 때 발생
mousemove 마우스가 요소 위에서 이동할 때 발생
mouseover 요소 위로 마우스를 올릴 때 발생
mouseout 요소에서 마우스를 벗어날 때 발생
contextmenu 마우스 우클릭 시 발생 (컨텍스트 메뉴)

예시:

document.getElementById("btn").addEventListener("click", function() {
  alert("버튼이 클릭됨!");
});

✅ 2. 키보드 이벤트 (Keyboard Events)

이벤트 이름 설명
keydown 키를 누를 때 발생 (누르고 있는 동안 계속 발생)
keypress 키를 누를 때 발생 (문자 키에만 작동, 현재는 권장되지 않음)
keyup 키를 뗄 때 발생

예시:

document.addEventListener("keydown", function(e) {
  console.log(`누른 키: ${e.key}`);
});

✅ 3. 폼 이벤트 (Form Events)

이벤트 이름 설명
submit 폼을 제출할 때 발생
change <input>, <select>, <textarea> 값이 변경되고 포커스가 벗어날 때 발생
input <input>이나 <textarea>에 입력이 일어날 때마다 발생
focus 요소가 포커스를 받을 때 발생
blur 요소가 포커스를 잃을 때 발생
reset 폼을 리셋할 때 발생

예시:

document.querySelector("form").addEventListener("submit", function(e) {
  e.preventDefault(); // 실제 제출 막기
  alert("폼이 제출됨!");
});

✅ 4. 로드 이벤트 (Load Events)

이벤트 이름 설명
load 페이지나 리소스(이미지 등)가 완전히 로드됐을 때 발생
DOMContentLoaded HTML 문서가 완전히 로드됐을 때 (이미지는 제외) 발생
unload 페이지를 떠날 때 발생 (현재는 거의 사용 안 함)
beforeunload 페이지를 떠나기 직전에 발생 (경고창 가능)

예시:

window.addEventListener("load", function() {
  console.log("모든 리소스가 로드됨!");
});

document.addEventListener("DOMContentLoaded", function() {
  console.log("HTML 로드 완료!");
});