이벤트 버블링과 이벤트 캡쳐링

 gpt A.
이벤트 버블링(Event Bubbling)과 이벤트 캡쳐링(Event Capturing)은 웹 개발에서 이벤트 처리와 관련된 두 가지 중요한 개념입니다. 이벤트 처리란 웹 페이지에서 사용자의 상호작용에 응답하는 방법을 의미합니다.

1. 이벤트 버블링(Event Bubbling):
이벤트 버블링은 일반적으로 HTML 요소가 중첩된 경우, 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 방식입니다. 이벤트 버블링은 이벤트가 가장 구체적인 요소(일반적으로 가장 하위 요소)에서 시작하여 상위 요소(부모, 조상 요소)로 전달됩니다. 이렇게 이벤트가 상위 요소로 전파되면 상위 요소에서도 해당 이벤트를 처리할 수 있습니다.

예를 들어, 버튼 내부에 있는 div 요소에서 클릭 이벤트가 발생하면, 클릭 이벤트는 div에서 시작해서 버튼으로 이벤트가 전파되고, 그 다음에는 상위 요소인 div의 부모 요소에 대해서도 클릭 이벤트가 전파됩니다.

<div id="outer">
  <button id="inner">Click me</button>
</div>

위의 예제에서 버튼을 클릭하면 "Inner Button Clicked" 메시지가 먼저 표시되고, 그 다음에 "Outer Div Clicked" 메시지가 표시됩니다.

2. 이벤트 캡쳐링(Event Capturing):
이벤트 캡쳐링은 이벤트 버블링과 반대로 상위 요소에서 하위 요소로 이벤트를 전파하는 방식입니다. 이벤트 캡쳐링 단계에서 이벤트는 최상위 요소에서 시작하여 하위 요소로 전파됩니다. 이후에는 이벤트 버블링과 같이 하위 요소에서 상위 요소로 이벤트가 전파됩니다.

이벤트 캡쳐링은 DOM 요소의 부모에서 자식으로 이벤트가 전파되기 전에 이벤트 핸들러를 실행할 수 있습니다. 이를 통해 이벤트 전파의 초기 단계에서 특정 동작을 수행할 수 있습니다.

이벤트 캡쳐링을 사용하려면 다음과 같이 `addEventListener` 함수의 세 번째 인자로 `true`를 전달합니다.

document.getElementById('outer').addEventListener('click', function() {
  alert('Outer Div Capturing Phase');
}, true);

document.getElementById('inner').addEventListener('click', function() {
  alert('Inner Button Capturing Phase');
}, true);

위의 예제에서 버튼을 클릭하면 "Outer Div Capturing Phase" 메시지가 먼저 표시되고, 그 다음에 "Inner Button Capturing Phase" 메시지가 표시됩니다.

요약하면, 이벤트 버블링은 하위에서 상위로 이벤트 전파를 나타내고, 이벤트 캡쳐링은 상위에서 하위로 이벤트 전파를 나타냅니다. 개발자는 이 두 가지 단계를 사용하여 특정 요소에서 이벤트를 캡처하거나 처리할 수 있습니다.