자바스크립트에서 이벤트 버블링(Event Bubbling)과 캡처링(Capturing)이란 무엇인가요?

Q1: 이벤트 버블링(Event Bubbling)이란 무엇인가요?
A1: 이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 그 요소의 부모 요소들 방향으로 이벤트가 전파되는 현상을 말합니다. 즉, 하위 요소에서 발생한 이벤트가 상위 요소들로 차례대로 전달되어 처리됩니다. 예를 들어, 자식 요소에서 클릭 이벤트가 발생하면 그 이벤트가 부모 요소, 조부모 요소 등으로 전파됩니다.

Q2: 이벤트 캡처링(Event Capturing)이란 무엇인가요?
A2: 이벤트 캡처링은 이벤트가 최상위 요소(window나 document)에서 시작하여 이벤트가 발생한 요소까지 내려오는 방향으로 전파되는 것을 의미합니다. 즉, 이벤트가 최상위에서부터 각각의 하위 요소를 거쳐 이벤트가 발생한 요소까지 전달됩니다. 이는 버블링과 반대 방향입니다.

Q3: 이벤트 전파의 순서는 어떻게 되나요?
A3: 이벤트 전파는 보통 3단계로 진행됩니다.
1. 캡처링 단계 (최상위 → 이벤트 대상까지 하위 방향)
2. 타겟 단계 (이벤트가 실제 발생한 요소)
3. 버블링 단계 (이벤트 대상 → 부모 요소 쪽으로 상위 방향)

Q4: 자바스크립트에서 이벤트 버블링과 캡처링은 어떻게 구분하나요?
A4: `addEventListener` 메서드의 세 번째 인수 또는 옵션 객체 안에 `capture` 속성을 통해 구분합니다.
- `capture: true` 이면 캡처링 단계에서 이벤트 리스너가 호출됩니다.
- `capture: false` (기본값) 이면 버블링 단계에서 이벤트 리스너가 호출됩니다.

예:
```javascript
element.addEventListener('click', handler, true); // 캡처링 단계 element.addEventListener('click', handler, false); // 버블링 단계 (기본값)
```

Q5: 이벤트 버블링을 중지할 수 있나요?
A5: 네, 이벤트 객체의 `stopPropagation()` 메서드를 호출하면 현재 이벤트의 전파(버블링과 캡처링 모두)를 중단할 수 있습니다.
```javascript
element.addEventListener('click', function(event) {
event.stopPropagation();
});
```

Q6: 이벤트 버블링과 캡처링은 실무에서 어떤 점에서 중요하나요?
A6: 이벤트 위임(Event Delegation)을 구현할 때 매우 중요합니다. 부모 요소에서 자식들의 이벤트를 한꺼번에 처리할 수 있기 때문에 성능 면에서 효율적이며, 동적으로 생성되는 요소에도 이벤트를 적용할 수 있습니다. 또한, 올바른 이벤트 단계(capturing vs bubbling)를 선택해야 정확한 시점에 원하는 이벤트 처리가 가능합니다.

Q7: 모든 이벤트가 버블링되나요?
A7: 대부분의 이벤트는 버블링되지만, `focus`, `blur`, `mouseenter`, `mouseleave` 같은 일부 이벤트는 버블링이 되지 않습니다.

---

요약하자면, 이벤트 캡처링 은 이벤트가 최상위에서 하위 방향으로 내려가는 전파이며, 이벤트 버블링 은 이벤트가 하위에서 상위 방향으로 올라가는 전파입니다. 자바스크립트에서는 기본적으로 이벤트가 버블링 단계에서 처리되고, 필요시 캡처링 단계를 지정할 수 있습니다.

이벤트 버블링(Event Bubbling)과 캡처링(Capturing)은 웹 개발에서 DOM(Document Object Model) 이벤트가 전파되는 두 가지 주요 방식입니다.

이 두 개념은 이벤트가 발생했을 때, 해당 이벤트가 어떤 순서로 요소들에 전달되는지를 설명합니다.

이를 이해하는 것은 JavaScript에서 이벤트 처리 및 사용자 인터페이스의 상호작용을 효과적으로 관리하는 데 매우 중요합니다.

1. 이벤트 버블링 (Event Bubbling) 이벤트 버블링은 이벤트가 발생한 요소(타겟 요소)에서 시작하여 그 요소의 부모 요소로 전파되는 방식입니다.

즉, 이벤트는 가장 깊은 자식 요소에서 시작하여 DOM 트리의 상위 요소로 올라가면서 발생합니다.

이 과정에서 각 요소는 이벤트를 처리할 수 있는 기회를 가집니다.

예를 들어, 다음과 같은 HTML 구조가 있다고 가정해 보겠습니다: ```html

Click me!

``` 여기서 ` child` 요소를 클릭하면, 클릭 이벤트는 다음과 같은 순서로 전파됩니다: 1. ` child` 요소에서 이벤트 발생

2. ` parent` 요소로 이벤트 전파 이벤트 버블링의 장점은 부모 요소에서 자식 요소의 이벤트를 처리할 수 있는 기능을 제공하여, 코드의 중복을 줄이고 이벤트 처리를 중앙 집중화할 수 있다는 점입니다.

예를 들어, ` parent` 요소에 클릭 이벤트 리스너를 추가하면, ` child` 요소를 클릭할 때도 해당 이벤트를 처리할 수 있습니다.

```javascript document.getElementById('parent').addEventListener('click', function() { alert('Parent clicked!'); }); document.getElementById('child').addEventListener('click', function() { alert('Child clicked!'); }); ``` 위 코드를 실행하면, ` child` 요소를 클릭했을 때 두 개의 알림이 순서대로 나타납니다.

먼저 "Child clicked!"가 나타나고, 그 다음에 "Parent clicked!"가 나타납니다.



2. 이벤트 캡처링 (Event Capturing) 이벤트 캡처링은 이벤트가 DOM 트리의 최상위 요소에서 시작하여 타겟 요소로 내려가는 방식입니다.

즉, 이벤트는 부모 요소에서 시작하여 자식 요소로 전파됩니다.

이 방식은 이벤트가 발생한 요소에 도달하기 전에 모든 부모 요소가 이벤트를 처리할 수 있는 기회를 제공합니다.

위의 예제를 캡처링 방식으로 처리해보면, 다음과 같은 순서로 이벤트가 전파됩니다: 1. ` parent` 요소에서 이벤트 발생

2. ` child` 요소로 이벤트 전파 이벤트 캡처링을 사용하려면, `addEventListener` 메서드의 세 번째 인자로 `true`를 전달해야 합니다.

예를 들어: ```javascript document.getElementById('parent').addEventListener('click', function() { alert('Parent clicked!'); }, true); document.getElementById('child').addEventListener('click', function() { alert('Child clicked!'); }, true); ``` 위 코드를 실행하면, ` child` 요소를 클릭했을 때 "Parent clicked!"가 먼저 나타나고, 그 다음에 "Child clicked!"가 나타납니다.

이는 이벤트가 부모 요소에서 자식 요소로 전파되기 때문입니다.



3. 버블링과 캡처링의 사용 대부분의 경우, 이벤트 버블링이 더 일반적으로 사용됩니다.

이는 사용자 인터페이스에서 자주 발생하는 상호작용을 처리하는 데 유용하기 때문입니다.

예를 들어, 여러 개의 버튼이 있는 리스트에서 각 버튼에 대한 클릭 이벤트를 부모 요소에서 처리하면, 코드의 중복을 줄일 수 있습니다.

반면, 이벤트 캡처링은 특정 상황에서 유용할 수 있습니다.

예를 들어, 특정 요소가 다른 요소의 이벤트를 가로채고 싶을 때 사용할 수 있습니다.

또한, 캡처링을 통해 이벤트가 발생하기 전에 특정 로직을 실행할 수 있습니다.



4. 이벤트 전파 중단 이벤트 전파는 필요에 따라 중단할 수 있습니다.

`stopPropagation()` 메서드를 사용하면 이벤트가 더 이상 전파되지 않도록 할 수 있습니다.

예를 들어, 다음과 같이 사용할 수 있습니다: ```javascript document.getElementById('child').addEventListener('click', function(event) { alert('Child clicked!'); event.stopPropagation(); // 이벤트 전파 중단 }); ``` 위의 코드에서 ` child` 요소를 클릭하면 "Child clicked!"가 나타난 후, ` parent` 요소로의 이벤트 전파가 중단됩니다.

따라서 "Parent clicked!"는 나타나지 않습니다.

결론 이벤트 버블링과 캡처링은 JavaScript에서 이벤트를 처리하는 두 가지 중요한 메커니즘입니다.

이 두 가지 방식을 이해하고 적절히 활용하면, 복잡한 사용자 인터페이스에서의 이벤트 처리를 보다 효과적으로 관리할 수 있습니다.

이벤트 전파의 흐름을 이해하고, 필요에 따라 이벤트를 중단하는 방법을 익히는 것은 웹 개발에서 중요한 기술 중 하나입니다.