자바스크립트 이벤트 정리

1️⃣ 이벤트란?

• 이벤트(Event): 사용자가 발생시키는 행동 (ex. 클릭, 키보드 입력, 마우스 이동 등)
• 이벤트 리스너(Event Listener): 해당 이벤트에 반응해 실행되는 자바스크립트 코드

---

2️⃣ 이벤트 등록 방법

✅ A. 인라인 방식 (HTML 내부에 작성 – ❌비추천)

<p onclick="alert('클릭됨')">클릭</p>

✅ B. 속성 방식 (JS에서 .onclick 사용)

element.onclick = function () {
  alert("클릭됨");
};

• 단점: 이벤트 1개만 등록 가능

✅ C. addEventListener() 방식 ← 가장 추천

element.addEventListener("click", function () {
  alert("클릭됨");
});

• 장점:
  • 여러 이벤트 리스너 등록 가능
  • 이벤트 전파 방식 설정 가능 (세 번째 인자)

---

3️⃣ 이벤트 객체 (event)

이벤트 핸들러에 자동으로 전달되는 객체로, 다양한 정보를 포함합니다.

element.addEventListener("click", function (event) {
  console.log(event.type); // "click"
  console.log(event.target); // 클릭된 대상 요소
});

---

4️⃣ 이벤트 전파 (Propagation)

이벤트는 두 단계로 전달됩니다:

단계	설명
Capturing	부모 → 자식 (true)
Bubbling(기본)	자식 → 부모 (false 또는 생략)

element.addEventListener("click", handler, true); // 캡처링
element.addEventListener("click", handler, false); // 버블링

---

5️⃣ 기본 동작 & 전파 차단

✅ 기본 동작 막기 (form 전송, a 링크 이동 등 방지)

event.preventDefault();

✅ 이벤트 전파 중단 (부모에게 전달 안 됨)

event.stopPropagation();

---

6️⃣ 이벤트 제거

element.removeEventListener("click", handlerFunction);

• 주의: 익명 함수는 제거 불가 반드시 참조 가능한 함수여야 함

---

✅ 실전 예제

<button id="btn">눌러보세요</button>
<p id="text">여기에 출력됩니다.</p>

<script>
  const btn = document.getElementById("btn");
  const text = document.getElementById("text");

  function handleClick(event) {
    text.textContent = `이벤트 타입: ${event.type}, 대상: ${event.target.tagName}`;
  }

  btn.addEventListener("click", handleClick);
</script>

---

🧠 기억 포인트 요약

항목	설명
이벤트	사용자 상호작용 ex. 클릭, 입력 등
리스너 등록	addEventListener("click", fn) 권장
이벤트 객체	event.type, event.target 등
전파 단계	true → Capturing, false → Bubbling
동작 중단	preventDefault(), stopPropagation()
이벤트 해제	removeEventListener() ← 참조 함수 필수