이벤트 전파(event propagation)에 대해서 설명해주세요.

 

 

📦 이벤트는 어떻게 움직일까?

우리가 버튼을 클릭하거나 화면을 터치하면,
브라우저는 이 이벤트를 어떤 방식으로 처리할까요?

이벤트는 단순히 "딱!" 하고 거기서 끝나는 게 아니라,
DOM(Document Object Model)을 따라 "전파"되는 특징이 있어요!

---

🧭 이벤트 전파의 3단계

1️⃣ 캡처링(Capturing) 단계 👀

📍 DOM 최상단(document)부터 시작해서
👇 이벤트 타겟 요소로 내려오는 과정

2️⃣ 타겟(Target) 단계 🎯

👉 이벤트가 실제로 발생한 타겟 요소에 도착!
여기서 등록된 이벤트 리스너가 실행됩니다.

3️⃣ 버블링(Bubbling) 단계 🫧

⬆️ 타겟에서 시작해서 다시 DOM 상위 요소들로 올라가는 과정

---

📘 예시 코드로 확인해볼까요?

<div id="outer">
  <button id="inner">클릭해봐요!</button>
</div>

document.getElementById("outer").addEventListener("click", () => {
  console.log("🧱 outer DIV clicked!");
});

document.getElementById("inner").addEventListener("click", () => {
  console.log("🔘 button clicked!");
});

👉 버튼을 클릭하면 아래처럼 로그가 찍힙니다:

🔘 button clicked!
🧱 outer DIV clicked!

왜냐하면, 버튼 → 바깥쪽으로 버블링되기 때문이에요! 🫧

---

🔄 캡처링도 하고 싶다면?

document.getElementById("outer").addEventListener("click", () => {
  console.log("👀 캡처링 단계 - outer!");
}, { capture: true });

이렇게 하면 내려오는 캡처링 단계에서 실행돼요!

---

🚫 전파를 멈추고 싶다면?

event.stopPropagation();

👉 이걸 사용하면 이벤트가 더 이상 부모로 올라가지 않아요!

---

🧠 정리하면!

단계 방향 설명

캡처링 단계	위 → 아래	이벤트가 타겟으로 내려오는 중
타겟 단계	도달 지점	실제로 이벤트가 발생한 요소
버블링 단계	아래 → 위	이벤트가 부모 요소로 전파되는 중

---

🎉 마무리

이벤트 전파를 이해하면…

• ❌ 이벤트 중복 처리 방지
• 🎯 특정 요소에서만 이벤트 받기
• 🚀 성능 좋은 UI 만들기

에 큰 도움이 됩니다!

 

 

---

이벤트 전파(event propagation)에 대해서 설명해주세요.

 

이벤트 전파는 DOM에서 이벤트가 발생했을 때, 그 이벤트가 어떤 방식으로 전파되는지를 설명하는 개념입니다. 이벤트 전파는 크게 세 단계로 나뉘는데, 캡처링(Capturing), 타겟(Target), 그리고 버블링(Bubbling) 입니다.

 

첫번째로 캡처링 단계에 대해서 설명 드리겠습니다. 이벤트가 DOM 트리의 최상위 요소(document)에서 시작하여, 이벤트가 발생한 요소(타깃 요소)로 향해 내려가는 단계입니다. 이 과정에서 상위 요소들에 이벤트 리스너가 있으면 그 순서대로 실행될 수 있습니다.

두번째로는 타겟 단계입니다. 이벤트가 실제로 발생한 타겟 요소에 도달하는 단계입니다. 타겟 요소에 등록된 이벤트 리스너가 이 시점에 실행됩니다.

마지막으로 버블링 단계입니다. 타겟 요소에서 이벤트가 발생한 후, 다시 DOM 트리의 상위 요소들로 이벤트가 전파되어 올라가는 단계입니다. 이 과정에서 상위 요소들에 등록된 이벤트 리스너들이 실행될 수 있습니다.

기본적으로 대부분의 이벤트는 버블링을 통해 전파되지만, addEventListener()의 세 번째 인자로 { capture: true }를 전달하면, 캡처링 단계에서도 이벤트를 처리할 수 있습니다.

 

이벤트 전파는 웹 페이지에서 요소 간의 상호작용을 제어하는 데 중요한 역할을 합니다. 다만 이러한 이벤트 전파가 정상 동작에 방해가 되는 경우, event.stopPropagation() 메서드를 사용하여 특정 단계에서 이벤트의 전파를 중단할 수 있습니다.

 

정리해서 말씀 드려보자면, 이벤트 전파는 DOM 구조에서 이벤트가 어떻게 상위와 하위 요소 간에 전달되는지를 정의하는 메커니즘이며, 이를 통해 복잡한 사용자 상호작용을 효율적으로 관리할 수 있습니다.