이벤트 버블링과 캡처링에 대해 설명해주세요.
이벤트 버블링과 캡처링에 대해 설명해주세요.
이벤트 버블링은 이벤트가 발생했을 때 가장 안쪽의 타겟 요소에서 시작하여 부모 요소로 전파되는 방식입니다. 예를 들어, 버튼을 클릭했을 때 버튼 자체에서 이벤트가 발생한 후 이 이벤트가 상위 요소인 div, body, document, window로 전파되는 과정을 거치게 됩니다. 기본적으로 브라우저는 이벤트 전파를 버블링 단계에서 처리하도록 설계되어 있습니다.
반면, 이벤트 캡처링은 이와 반대 방향으로 진행됩니다. 즉, 이벤트가 최상위 부모 요소에서부터 시작해 점점 타겟 요소로 내려오면서 전파됩니다. 예를 들어, window에서 이벤트가 시작되어 document, body, div를 거쳐 버튼에 도달하게 되는 방식입니다. 기본적으로 캡처링 단계는 비활성화되어 있지만, addEventListener 함수의 세 번째 옵션으로 캡처링을 활성화할 수 있습니다. 이 옵션에 true를 설정하면 캡처링 단계에서 이벤트를 처리할 수 있습니다.
버블링과 캡처링은 각각의 특성 덕분에 서로 다른 상황에서 유용하게 활용됩니다. 버블링은 특히 이벤트 위임 같은 패턴에서 활용도가 높습니다. 예를 들어, 동적으로 추가되는 자식 요소가 있는 상황에서는 부모 요소에 이벤트 리스너를 등록하여 자식 요소들의 이벤트를 효율적으로 관리할 수 있습니다. 이렇게 하면 각각의 자식 요소마다 이벤트 리스너를 따로 등록할 필요가 없으므로 성능적인 이점이 생깁니다. 예를 들어, 리스트 항목(li)의 클릭 이벤트를 처리할 때 부모 요소인 ul에 리스너를 하나만 등록하여 모든 li의 클릭 이벤트를 처리할 수 있습니다.
한편, 캡처링은 부모 요소에서 자식 요소보다 먼저 이벤트를 처리해야 할 때 유용합니다. 예를 들어, 페이지의 전체적인 트래킹이나 로깅 기능을 구현할 때 캡처링 단계에서 이벤트를 처리하면 자식 요소에서의 추가 이벤트 처리 여부와 관계없이 부모에서 로직을 먼저 실행할 수 있습니다.
이런 이벤트 버블링과 캡처링 과정에서 발생할 수 있는 문제는 없을까요? 🤔
이벤트 버블링과 캡처링 과정에서 발생할 수 있는 문제는, 이벤트 중첩으로 인해 동일 이벤트가 중복 처리되는 상황, 캡처링 단계에서 불필요한 이벤트가 처리되는 성능 문제, 이벤트 위임 시 타겟 오작동 등 다양한 사례가 있습니다.
하지만 이러한 문제들을 제어하기 위해 두 가지 주요 메서드를 사용할 수 있습니다.
첫째, stopPropagation 메서드를 호출하면 특정 이벤트가 현재 단계에서 멈추고 더 이상 부모나 자식으로 전파되지 않도록 할 수 있습니다. 이는 복잡한 UI 구조에서 불필요한 이벤트 처리를 방지할 때 유용합니다.
둘째, preventDefault 메서드를 사용하면 링크 클릭 시 페이지 이동이나 폼 제출과 같은 브라우저의 기본 동작을 방지할 수 있습니다.
🔍 이벤트 버블링과 캡처링이 뭐야?
웹 페이지에서 버튼을 클릭하면, 그 클릭 이벤트가 버튼만 알고 있을까? 아니에요! 이벤트는 부모 요소에도 전달돼요. 바로 버블링(Bubbling)과 캡처링(Capturing)이라는 개념이 있어요.
💭 쉽게 이해하는 방법
1️⃣ 이벤트 버블링 → "물속에서 거품이 올라오는 모습"
- 가장 안쪽 요소(버튼)에서 시작해서 바깥쪽(부모 요소)으로 전달돼요.
- 예를 들어, `<button>`을 클릭하면 먼저 버튼이 반응하고, 그 다음 `<div>`, `<body>`, `<document>`가 차례로 이벤트를 받게 돼요.
- 기본적으로 브라우저는 버블링 방식으로 이벤트를 처리해요!
2️⃣ 이벤트 캡처링 → "비가 내려오는 모습"
- 가장 바깥쪽 요소(부모)에서 시작해서 안쪽(자식 요소)으로 전달돼요.
- 예를 들어, `<window>`에서 이벤트가 시작되어 `<body>`, `<div>`, `<button>` 순으로 내려와요.
- 캡처링 방식은 기본적으로 꺼져 있지만, `addEventListener`의 옵션을 `true`로 설정하면 활성화할 수 있어요.
🛠 버블링과 캡처링은 어디에 쓰일까?
💡 이벤트 버블링 활용 예시 → _이벤트 위임_ (Event Delegation)
- `<ul>` 안에 여러 개의 `<li>`가 있다면, 각 `<li>`마다 이벤트 리스너를 붙이는 대신 부모 요소인 `<ul>`에만 이벤트를 붙여서 처리 할 수 있어요!
- 동적으로 생성되는 `<li>` 요소들도 자동으로 이벤트를 받게 돼서 성능이 좋아져요.
💡 이벤트 캡처링 활용 예시 → _부모에서 먼저 이벤트 처리_
- 페이지에서 트래킹(추적) 기능을 구현할 때, 부모 요소에서 먼저 이벤트를 처리하고 나서 자식 요소 이벤트를 실행할 수 있어요.
- 예를 들어, 광고 클릭을 추적할 때 전체 페이지에서 먼저 이벤트를 감지하고 세부적인 처리는 자식 요소에서 진행**하면 깔끔하게 관리할 수 있어요.
⚠️ 주의할 점**
- 이벤트 중첩으로 인해 중복 실행이 발생할 수 있어요.
- 필요하지 않은 이벤트가 부모 요소까지 전파될 수도 있어요.
- `stopPropagation()`을 사용하면 이벤트의 전파를 멈출 수 있어요!
- `preventDefault()`를 사용하면 기본 동작(예: 링크 클릭 시 페이지 이동)을 막을 수 있어요.