12.4.1 이벤트 전파 과정 - 물방울이 흘러가는 아름다운 여행

📘 12.4.1 이벤트 전파 과정 - 물방울이 흘러가는 아름다운 여행

안녕하세요, 여러분. 지금까지 이벤트 위임에 대해 함께 배우면서 혹시 궁금한 점이 있었을 거예요. "자식 요소를 클릭했는데, 어떻게 부모 요소도 함께 반응할까?" 바로 이 질문의 답이 오늘 배울 이벤트 전파예요.

이벤트는 마치 물방울이 고요한 연못에 떨어져 파문이 퍼져나가듯, HTML 요소들 사이를 자연스럽게 여행해요. 이 과정을 이해하면 이벤트 위임이 왜 작동하는지도 차근차근 알 수 있답니다.

🧠 새로운 단어들과 친해지기

단어	마음을 담은 설명
이벤트 전파	이벤트가 HTML 요소들 사이에서 차례대로 전해지는 자연스러운 흐름이에요
버블링	이벤트가 자식에서 부모로 위쪽으로 올라가는 과정이에요. 마치 물속에서 올라오는 거품처럼요
캡처링	이벤트가 부모에서 자식으로 아래쪽으로 내려가는 과정이에요
타겟 단계	실제로 이벤트가 발생한 요소에서 처리되는 소중한 순간이에요

✨ 이벤트 전파의 핵심 개념

웹페이지에서 이벤트가 발생하면 참으로 아름다운 일이 일어납니다. 그 이벤트는 클릭된 요소에서만 처리되는 것이 아니라, 정해진 순서에 따라 여러 요소들을 차근차근 거쳐가요.

이벤트 전파는 3단계로 이루어집니다:

1. 캡처링 단계: 맨 위 부모에서 시작해서 클릭된 요소까지 부드럽게 내려가요
2. 타겟 단계: 실제로 클릭된 요소에서 이벤트가 처리돼요
3. 버블링 단계: 클릭된 요소에서 시작해서 맨 위 부모까지 자연스럽게 올라가요

대부분 버블링 단계를 많이 사용해요. 이 덕분에 이벤트 위임이 가능한 거랍니다!

마음을 담은 비유: 작은 마을에서 소식이 전해지는 방법

3층짜리 작은 건물에서 2층에 사는 민수가 "생일 파티를 해요!"라고 소리쳤다고 상상해보세요.

캡처링: 건물 관리실에서 소식을 받고, 각 층으로 전달하며 2층까지 내려가요.
"관리실 → 3층 → 2층"

타겟 단계: 2층에서 "생일 파티!"라는 메시지가 실제로 처리돼요.

버블링: 2층에서 시작된 소식이 위층으로 올라가며 전달돼요.
"2층 → 3층 → 관리실"

실제로는 보통 버블링 방식을 사용해요. 마치 연못에 떨어진 물방울이 아래에서 위로 올라가는 것처럼요!

🎯 이벤트 전파를 이해해야 하는 이유

1. 이벤트 위임의 원리 이해: 자식에서 발생한 이벤트가 부모로 전달되는 이유를 알 수 있어요
2. 예상치 못한 이벤트 방지: 자식을 클릭했는데 부모 이벤트까지 실행되는 상황을 대처할 수 있어요
3. 효율적인 이벤트 관리: 어디에 이벤트를 걸어주는 것이 좋은지 판단할 수 있어요

⚙️ 기본 사용법 살펴보기

기본 구조 - 버블링 방식:

// 부모와 자식에 이벤트를 걸어줘요
부모요소.addEventListener("click", function() {
    console.log("부모 클릭됨");
});

자식요소.addEventListener("click", function() {
    console.log("자식 클릭됨");
});
// 자식을 클릭하면: "자식 클릭됨" → "부모 클릭됨" 순서로 실행

캡처링 방식으로 걸어주기:

// 세 번째 매개변수에 true를 주면 캡처링 방식
부모요소.addEventListener("click", function() {
    console.log("부모 먼저 실행됨");
}, true);

자식요소.addEventListener("click", function() {
    console.log("자식 나중에 실행됨");
});
// 자식을 클릭하면: "부모 먼저 실행됨" → "자식 나중에 실행됨"

🧪 직접 해보며 배우기

🔹 첫 번째 예시: 기본적인 이벤트 전파 확인하기

// HTML: <div id="parent"><button id="child">클릭해보세요</button></div>

let parent = document.getElementById("parent");
parent.addEventListener("click", function() {
    console.log("2. 부모 div가 클릭되었어요!");
});

let child = document.getElementById("child");
child.addEventListener("click", function() {
    console.log("1. 자식 버튼이 클릭되었어요!");
});

// 버튼을 클릭하면 두 이벤트가 모두 실행돼요!

버튼을 클릭하면 먼저 자식의 이벤트가 실행되고, 그다음 버블링에 의해 부모의 이벤트도 자연스럽게 실행돼요.

🔹 두 번째 예시: 3단계 구조에서의 이벤트 전파

// HTML: <div id="grandpa"><div id="father"><button id="son">클릭</button></div></div>

let grandpa = document.getElementById("grandpa");
grandpa.addEventListener("click", function() {
    console.log("3. 할아버지까지 전달되었어요!");
});

let father = document.getElementById("father");
father.addEventListener("click", function() {
    console.log("2. 아버지에게 전달되었어요!");
});

let son = document.getElementById("son");
son.addEventListener("click", function() {
    console.log("1. 아들이 클릭되었어요!");
});

버튼을 클릭하면: "아들" → "아버지" → "할아버지" 순서로 따뜻하게 실행돼요.

🔹 세 번째 예시: 캡처링과 버블링 함께 사용하기

// 부모에 캡처링 방식으로 이벤트를 걸어줘요
parent.addEventListener("click", function() {
    console.log("1. 부모가 먼저 실행돼요! (캡처링)");
}, true);

// 자식에 일반 방식으로 이벤트를 걸어줘요
child.addEventListener("click", function() {
    console.log("2. 자식이 나중에 실행돼요!");
});

// 부모에 버블링 방식으로도 추가해줘요
parent.addEventListener("click", function() {
    console.log("3. 부모가 마지막에도 실행돼요! (버블링)");
});

실행 순서: "부모 캡처링" → "자식" → "부모 버블링"

🔄 이벤트 전파 과정 정리하기

1. 이벤트 발생: 사용자가 요소를 클릭해요
2. 캡처링 단계: 맨 위에서 아래로 내려가며 캡처링 이벤트들을 실행해요
3. 타겟 단계: 실제 클릭된 요소의 이벤트가 실행돼요
4. 버블링 단계: 아래에서 위로 올라가며 버블링 이벤트들을 실행해요
5. 이벤트 완료: 모든 전파 과정이 차분히 끝나요

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: 자식을 클릭했는데 부모 이벤트까지 실행되어서 당황하기

parent.addEventListener("click", function() {
    console.log("부모 클릭됨"); // 의도하지 않았는데 실행돼요
});

child.addEventListener("click", function() {
    console.log("자식 클릭됨"); // 의도한 동작
});
// 자식을 클릭해도 부모 이벤트까지 실행돼요!

이는 버블링 때문에 일어나는 자연스러운 동작이에요. 필요하면 나중에 배울 방법으로 전파를 멈출 수 있어요.

❌ 실수 2: 이벤트 실행 순서를 잘못 예상하기

버블링 방식에서는 항상 자식이 먼저, 부모가 나중에 실행돼요. 부모가 먼저 실행되려면 캡처링 방식을 사용해야 해요.

✏️ 연습문제로 개념 다지기

Ex1) 다음 코드에서 버튼을 클릭하면 어떤 순서로 메시지가 나올까요?

let container = document.getElementById("container");
let button = document.getElementById("button");

container.addEventListener("click", function() {
    console.log("컨테이너 클릭됨");
});

button.addEventListener("click", function() {
    console.log("버튼 클릭됨");
});

정답: "버튼 클릭됨" → "컨테이너 클릭됨"

Ex2) 3단계 중첩 구조에서 내부를 클릭하면?

outer.addEventListener("click", function() {
    console.log("외부");
});

middle.addEventListener("click", function() {
    console.log("중간");
});

inner.addEventListener("click", function() {
    console.log("내부");
});

정답: "내부" → "중간" → "외부"

🤔 조금 더 어려운 문제로 실력 확인하기

Q1. 이벤트 전파의 3단계를 순서대로 나열하고, 각 단계를 설명해보세요.

정답:

1. 캡처링 - 부모에서 자식으로 내려가는 단계
2. 타겟 - 실제 이벤트가 발생한 요소에서 처리되는 단계
3. 버블링 - 자식에서 부모로 올라가는 단계

Q2. 다음 코드에서 내부 버튼을 클릭했을 때의 실행 순서는?

// HTML: <div id="a"><div id="b"><button id="c">버튼</button></div></div>
document.getElementById("a").addEventListener("click", function() {
    console.log("A");
});

document.getElementById("b").addEventListener("click", function() {
    console.log("B");
});

document.getElementById("c").addEventListener("click", function() {
    console.log("C");
});

정답: "C" → "B" → "A"

🔙 지난 시간 복습하기 (11단원 - DOM 조작)

복습 문제 1: 요소의 텍스트 내용 바꾸기

ID가 "title"인 요소의 텍스트를 "안녕하세요"로 바꾸는 올바른 방법은?

// A) document.getElementById("title").text = "안녕하세요"
// B) document.getElementById("title").textContent = "안녕하세요"  
// C) document.getElementById("title").value = "안녕하세요"
// D) document.getElementById("title").innerHTML = "안녕하세요"

정답: B) textContent = "안녕하세요"

복습 문제 2: 요소의 스타일 바꾸기

다음 코드에서 빈칸에 들어갈 속성은?

let myElement = document.getElementById("box");
myElement.______.backgroundColor = "red";
myElement.______.display = "none";

정답: style

이벤트 전파를 이해하면 이벤트 위임이 왜 작동하는지 알 수 있고, 더 효율적인 이벤트 관리를 할 수 있어요. 마치 물방울이 자연스럽게 올라가고 내려가는 것처럼, 이벤트도 정해진 순서에 따라 아름답게 전파되는 거예요!

✅ 학습 완료 체크리스트

학습 내용	이해했나요?
이벤트 전파의 3단계	✅
버블링과 캡처링의 차이	✅
기본 사용법	✅
실행 순서 예측하기	✅
실전 예제 이해	✅

🎯 추가 연습 문제들

추가 문제 1. 다음 코드에서 버튼을 클릭하면 어떤 순서로 실행될까요?

document.getElementById('box').addEventListener('click', function() {
    console.log('상자 클릭');
});

document.getElementById('btn').addEventListener('click', function() {
    console.log('버튼 클릭');
});

답: "버튼 클릭" → "상자 클릭"

추가 문제 2. 캡처링과 버블링을 섞어서 사용하면?

parent.addEventListener('click', () => console.log('부모'), true); // 캡처링
child.addEventListener('click', () => console.log('자식')); // 버블링

답: "부모" → "자식"

📂 마무리 정보

오늘 배운 이벤트 전파가 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 이벤트 전파를 다루는 방법을 배워볼게요!

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---