자바스크립트 addEventListener

🎯 JavaScript addEventListener 이해하기

오늘은 웹 페이지에서 이벤트 처리를 할 때 빠질 수 없는 addEventListener 메서드에 대해 공부했다. 클릭, 마우스 이동, 키보드 입력 등 다양한 이벤트를 감지하고 처리할 수 있어 매우 유용한 기능이다.

---

🧩 addEventListener란?

addEventListener는 특정 DOM 요소에 이벤트 리스너(event listener)를 추가하여, 사용자의 행동(클릭, 키보드 입력 등)에 반응하게 만드는 메서드다.

element.addEventListener(event, function, useCapture);

• event: 감지할 이벤트 종류 (예: "click", "keydown", "mouseover" 등)
• function: 이벤트 발생 시 실행할 콜백 함수
• useCapture (선택): 캡처링 또는 버블링 여부 (기본값: false)

---

🧪 사용 예시

1. 버튼 클릭 이벤트 감지

const button = document.querySelector("#myBtn");

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

2. 마우스를 올렸을 때 실행

const image = document.querySelector(".profile-img");

image.addEventListener("mouseover", function() {
  image.style.border = "2px solid skyblue";
});

3. 입력 필드에서 키보드 입력 감지

const input = document.querySelector("#username");

input.addEventListener("keydown", function(event) {
  console.log("입력된 키:", event.key);
});

---

✅ 왜 addEventListener를 쓸까?

특징	설명
여러 개 등록 가능	하나의 요소에 여러 이벤트 리스너를 붙일 수 있다.
제거 가능	removeEventListener로 제거할 수 있다.
HTML과 JS 분리	코드 구조가 더 깔끔해진다. (HTML 안에 onclick 등 쓰지 않아도 됨)

---

⚠️ 주의할 점

• 익명 함수로 등록한 리스너는 제거할 수 없다. (함수를 변수로 선언해두면 제거 가능)
• 이벤트 객체 event를 통해 이벤트에 대한 정보를 받을 수 있다.

---

🧠 함께 알아두면 좋은 이벤트 종류

이벤트 이름	설명
"click"	클릭했을 때
"dblclick"	더블 클릭했을 때
"keydown" / "keyup"	키보드 누름 / 뗄 때
"submit"	폼 전송 시
"change"	값이 변경되었을 때
"mouseover" / "mouseout"	마우스 올림 / 빠짐

---

✍️ 마무리

addEventListener는 사용자와 웹페이지 사이의 상호작용을 가능하게 해주는 핵심 도구다. 자바스크립트로 동적인 웹을 만들기 위해 꼭 익혀야 할 개념이니, 다양한 이벤트를 직접 실습하면서 더 익숙해져야겠다.