addEventListener()의 주요 이벤트 종류

✅ addEventListener()의 주요 이벤트 종류

addEventListener()를 사용하면 다양한 이벤트를 특정 요소에 적용할 수 있습니다.
아래는 자주 사용되는 이벤트 종류를 정리한 목록입니다.

---

📌 1. 마우스 관련 이벤트

이벤트명	설명
click	요소를 클릭할 때 실행됨
dblclick	요소를 더블 클릭할 때 실행됨
mousedown	요소에서 마우스 버튼을 눌렀을 때 실행됨
mouseup	요소에서 마우스 버튼을 뗄 때 실행됨
mousemove	마우스를 움직일 때 실행됨
mouseover	요소 위로 마우스가 올라갔을 때 실행됨 (자식 요소 포함)
mouseout	요소에서 마우스가 벗어났을 때 실행됨 (자식 요소 포함)
mouseenter	요소 위로 마우스가 올라갔을 때 실행됨 (자식 요소 제외)
mouseleave	요소에서 마우스가 벗어났을 때 실행됨 (자식 요소 제외)
contextmenu	마우스 오른쪽 버튼(우클릭) 클릭 시 실행됨

📌 예제 (마우스 이벤트)

document.getElementById("btn").addEventListener("click", function () {
  alert("버튼이 클릭되었습니다!");
});

---

📌 2. 키보드 관련 이벤트

이벤트명	설명
keydown	키를 누를 때 실행됨 (길게 누르면 반복)
keyup	키를 뗄 때 실행됨
keypress	키를 누를 때 실행됨 (keydown과 비슷하지만, 더 이상 사용 권장되지 않음)

📌 예제 (키보드 이벤트)

document.addEventListener("keydown", function (event) {
  console.log(`눌린 키: ${event.key}`);
});

---

📌 3. 입력(Input) 관련 이벤트

이벤트명	설명
input	사용자가 입력 필드(<input>, <textarea>)에 값을 입력할 때 실행됨
change	입력 필드 값이 변경되고 포커스를 잃었을 때 실행됨
focus	요소가 포커스를 받을 때 실행됨
blur	요소의 포커스가 해제될 때 실행됨

📌 예제 (입력 필드 이벤트)

document.getElementById("textInput").addEventListener("input", function () {
  console.log(`입력 값: ${this.value}`);
});

---

📌 4. 폼(Form) 관련 이벤트

이벤트명	설명
submit	폼을 제출할 때 실행됨 (기본 동작을 막으려면 event.preventDefault())
reset	폼을 초기화할 때 실행됨

📌 예제 (폼 제출 이벤트)

document.getElementById("myForm").addEventListener("submit", function (event) {
  event.preventDefault(); // 기본 제출 동작 막기
  alert("폼이 제출되었습니다!");
});

---

📌 5. 윈도우(Window) 관련 이벤트

이벤트명	설명
load	페이지의 모든 리소스(이미지, CSS 포함)가 로드된 후 실행됨
DOMContentLoaded	HTML이 모두 로드되고, DOM이 준비되었을 때 실행됨
resize	브라우저 창 크기가 변경될 때 실행됨
scroll	사용자가 스크롤할 때 실행됨

📌 예제 (스크롤 이벤트)

window.addEventListener("scroll", function () {
  console.log(`현재 스크롤 위치: ${window.scrollY}px`);
});

---

📌 6. 드래그 & 드롭 이벤트

이벤트명	설명
dragstart	요소를 드래그하기 시작할 때 실행됨
drag	드래그 중일 때 실행됨
dragend	드래그가 끝났을 때 실행됨
dragover	드래그된 요소가 다른 요소 위로 올려졌을 때 실행됨
drop	드래그된 요소를 놓을 때 실행됨

📌 예제 (드래그 & 드롭)

document.getElementById("dragItem").addEventListener("dragstart", function () {
  console.log("드래그 시작!");
});

---

📌 7. 미디어(Media) 관련 이벤트

이벤트명	설명
play	오디오/비디오가 재생될 때 실행됨
pause	오디오/비디오가 일시 정지될 때 실행됨
ended	오디오/비디오 재생이 끝났을 때 실행됨

📌 예제 (비디오 재생 이벤트)

document.getElementById("myVideo").addEventListener("play", function () {
  console.log("비디오 재생 중!");
});

---

📌 8. 복사/붙여넣기 관련 이벤트

이벤트명	설명
copy	사용자가 텍스트를 복사할 때 실행됨
paste	사용자가 텍스트를 붙여넣을 때 실행됨
cut	사용자가 텍스트를 잘라낼 때 실행됨

📌 예제 (복사 이벤트 차단)

document.addEventListener("copy", function (event) {
  event.preventDefault();
  alert("복사할 수 없습니다!");
});

---

📌 9. 네트워크(Network) 관련 이벤트

이벤트명	설명
online	네트워크가 연결될 때 실행됨
offline	네트워크 연결이 끊길 때 실행됨

📌 예제 (네트워크 상태 감지)

window.addEventListener("offline", function () {
  alert("인터넷 연결이 끊겼습니다!");
});

---

🎯 정리

이벤트 종류	대표 이벤트
마우스 이벤트	click, dblclick, mousemove, mouseenter
키보드 이벤트	keydown, keyup
입력 이벤트	input, change, focus, blur
폼 이벤트	submit, reset
윈도우 이벤트	load, scroll, resize
드래그 & 드롭 이벤트	dragstart, drop
미디어 이벤트	play, pause
클립보드 이벤트	copy, paste, cut
네트워크 이벤트	online, offline

addEventListener()를 활용하면 원하는 요소에 다양한 이벤트를 추가할 수 있습니다.
필요한 이벤트를 찾아서 활용해보세요! 🚀😊