자바스크립트 이벤트 & `data-*` 속성

📙data-* 속성 (데이터 속성)

• HTML 요소에 개발자가 원하는 정보를 담을 수 있는 속성
• data-속성이름="값"
• JS에서 element.dataset.속성이름 으로 꺼냄 (카멜표기)

예시

<button id="btn" data-color="red">빨강</button>

const btn = document.getElementById("btn");
console.log(btn.dataset.color); // "red"

---

🛑 기본 이벤트 동작 막기

어떤 태그들은 기본적으로 이벤트 동작을 가지고 있다

태그	기본 동작
<a>	링크 이동
<form>	페이지 전송
<input type="submit">	폼 제출

🫸 막는 방법

방식	코드
표준 방식	event.preventDefault()
고전/인라인 방식	return false

예시

form.addEventListener("submit", (e) => {
  e.preventDefault(); // 폼 전송 막음
});

---

🫧 이벤트 버블링 (Bubbling)

• 이벤트가 자식 → 부모로 올라가는 현상
• 모든 행동에는 이벤트가 존재
• 자식 요소에서 발생한 이벤트가 부모까지 전달됨
• 부모에 이벤트 리스너가 있으면 리스너가 듣고 실행됨

예시

<ul id="menu">
  <li>하나</li>
  <li>둘</li>
</ul>

menu.addEventListener("click", (e) => {
  console.log("부모가 감지:", e.target.textContent);
});

li를 클릭했지만 ul에 이벤트가 전달되어 실행됨

(자식 → 부모 방향 → 버블링)

🛑 버블링 막는 법

e.stopPropagation(); // 부모로 올라가는 이벤트 막기

---

📸 이벤트 캡처링 (Capturing)

• 이벤트가 부모 → 자식 방향으로 먼저 전달되는 과정
• 캡처링은 기본으로 꺼져 있음
  (사용하려면 addEventListener의 세 번째 인자를 true로 설정)

예시

parent.addEventListener("click", () => {
  console.log("부모에서 먼저 실행 (캡처링)");
}, true); // ← 캡처링 활성화

자식보다 부모가 먼저 실행됨

---

🥊 버블링 vs 캡처링

구분	방향	기본 활성화?	사용 목적
버블링	자식 → 부모	✅ (기본값)	이벤트 위임 등
캡처링	부모 → 자식	❌ (옵션 설정)	특정 상황 제어

---

🎸 이벤트 위임 (Event Delegation)

• 자식 여러 개에 이벤트를 하나씩 주는 대신,
  부모 하나에 이벤트를 주고 버블링을 이용해 처리

예시

<ul id="list">
  <li data-id="1">아이템1</li>
  <li data-id="2">아이템2</li>
</ul>

list.addEventListener("click", (e) => {
  if (e.target.matches("li")) {
    console.log("선택한 ID:", e.target.dataset.id);
  }
});

---

✋기본 동작 + 전파 모두 막기

e.preventDefault();      // 기본 동작 막기
e.stopPropagation();     // 전파(버블링) 막기

---

💎 인라인 / 고전 / 표준 이벤트 처리 비교

방식	등록 예	기본동작 막기	전파 막기
인라인	<a>	return false	return false
고전	el.onclick = fn	return false	return false
표준	el.addEventListener()	e.preventDefault()	e.stopPropagation()

---

🔎 요약

• data-*는 HTML에 임의로 정보 저장, JS에서 쉽게 꺼내 쓸 수 있음
• preventDefault()는 기본 동작 막기
• 이벤트는 어디서든 발생하고, 버블링을 통해 위로 올라감
• 부모가 자식 이벤트를 감지하는 게 버블링
• stopPropagation()으로 버블링을 끊을 수 있음