JavaScript 기초 <14. 이벤트(Event) 시스템과 버블링/캡처링 개념 정리>

자바스크립트 JavaScript

14. 이벤트(Event) 시스템과 버블링/캡처링 개념 정리 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. 이벤트(Event)란?

이벤트는 웹 페이지에서 특정 동작(클릭, 키 입력, 마우스 움직임 등)이 발생할 때 실행되는 동작을 의미합니다.
JavaScript에서는 addEventListener를 사용하여 이벤트를 감지하고 처리할 수 있습니다.

📌 이벤트를 활용하면 사용자와 동적인 상호작용이 가능함!

---

 

2. 이벤트 리스너(Event Listener) 추가하기

✅ 1) addEventListener 사용법

document.querySelector("#btn").addEventListener("click", () => {
    alert("버튼이 클릭되었습니다!");
});

✅ 2) removeEventListener로 이벤트 제거

function handleClick() {
    alert("이벤트 제거됨!");
}

const button = document.querySelector("#btn");
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

📌 이벤트 리스너는 언제든지 추가하거나 제거할 수 있음!

---

 

✅ 여기까지 이벤트의 기본 개념과 사용법을 배웠습니다!
👉 "그렇다면, 이벤트 버블링(Event Bubbling)과 캡처링(Event Capturing)이란 무엇일까?"
✅ 2부에서 이벤트 전파, 버블링/캡처링, 위임(Event Delegation)까지 상세히 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. 이벤트 전파(Event Propagation)란?

이벤트 전파는 하위 요소에서 발생한 이벤트가 부모 요소로 전달되는 과정을 의미합니다.
JavaScript의 이벤트 전파는 캡처링 → 타깃 → 버블링 단계로 이루어집니다.

캡처링(Capturing) → 타깃(Target) → 버블링(Bubbling)

✅ 이벤트 전파 예제 (버블링 확인)

document.querySelector("#parent").addEventListener("click", () => {
    console.log("부모 요소 클릭!");
});

document.querySelector("#child").addEventListener("click", () => {
    console.log("자식 요소 클릭!");
});

✅ 결과:

자식 요소 클릭!
부모 요소 클릭! (버블링으로 인해 실행)

📌 이벤트가 하위 요소에서 상위 요소로 전파되는 것이 이벤트 버블링임!

---

 

2. 이벤트 버블링(Event Bubbling)과 캡처링(Event Capturing) 차이

구분설명예제

버블링(Bubbling)	이벤트가 하위 요소에서 상위 요소로 전파됨 (기본값)	addEventListener("click", fn)
캡처링(Capturing)	이벤트가 상위 요소에서 하위 요소로 전달됨	addEventListener("click", fn, true)

✅ 캡처링 예제 (true 사용)

document.querySelector("#parent").addEventListener("click", () => {
    console.log("부모 요소 캡처링 단계");
}, true);

document.querySelector("#child").addEventListener("click", () => {
    console.log("자식 요소 클릭");
});

✅ 결과:

부모 요소 캡처링 단계 (캡처링)
자식 요소 클릭

📌 기본적으로 이벤트는 버블링이지만, true를 사용하면 캡처링 단계에서 실행됨!

---

 

3. 이벤트 위임(Event Delegation) – 효율적인 이벤트 처리

이벤트 위임이란, 하위 요소마다 이벤트를 등록하지 않고, 부모 요소에서 한 번에 이벤트를 처리하는 방법입니다.

✅ 이벤트 위임 예제

document.querySelector("#list").addEventListener("click", (event) => {
    if (event.target.tagName === "LI") {
        alert(`선택한 항목: ${event.target.textContent}`);
    }
});

📌 이벤트 위임을 사용하면 성능을 최적화할 수 있음!

---

 

✅ 지금까지 이벤트의 개념, 버블링/캡처링, 이벤트 위임을 상세히 배웠습니다!
👉 "그렇다면, JavaScript의 실행 컨텍스트와 호이스팅이란 무엇일까?"
✅ 다음 회차에서 실행 컨텍스트와 호이스팅 개념을 배워봅시다! 🚀