JavaScript 이벤트 버블링과 캡처링에 대한 이해 🌟

웹 개발을 배우는 여러분, JavaScript에서 이벤트가 어떻게 처리되는지 궁금하셨나요? 오늘은 JavaScript의 이벤트 버블링과 캡처링에 대해 쉽게 설명해드리겠습니다. 이 두 가지 개념을 이해하면 웹 페이지에서 사용자와의 상호작용을 더 잘 제어할 수 있습니다.

이벤트 버블링(Event Bubbling)

이벤트 버블링은 이벤트가 발생한 요소부터 시작해 DOM 트리를 따라 위로 올라가는 과정을 말합니다. 즉, 버튼을 클릭하면 그 버튼뿐만 아니라 그 버튼을 포함하고 있는 부모 요소들도 차례대로 이벤트를 받게 됩니다.

예를 들어, 아래와 같은 HTML 구조가 있다고 가정해봅시다.

<div id="parent">
  <button id="child">클릭하세요!</button>
</div>

여기서 버튼을 클릭하면, 먼저 #child에 이벤트가 발생하고, 그 다음 #parent에 이벤트가 발생합니다. 이는 마치 거품(bubble)이 물속에서 위로 올라가는 것과 비슷하다고 해서 '버블링'이라고 불립니다.

이벤트 캡처링(Event Capturing)

이벤트 캡처링은 이벤트 버블링과 반대로, DOM 트리의 최상위에서 시작해 아래로 내려가는 과정을 말합니다. 이벤트 캡처링은 이벤트를 더 일찍 잡아내고자 할 때 유용합니다.

이벤트 캡처링을 사용하려면, 이벤트 리스너를 추가할 때 세 번째 매개변수를 true로 설정하면 됩니다.

document.getElementById("parent").addEventListener("click", function() {
  alert("부모 요소에서 이벤트 캡처링!");
}, true);

이 코드는 #parent 요소에서 클릭 이벤트가 발생할 때마다 알림을 표시합니다. 여기서 중요한 점은, 이벤트가 #child에서 발생하더라도 #parent에서 먼저 캡처링되어 처리된다는 것입니다.

이벤트 버블링과 캡처링을 막는 방법

때로는 이벤트 버블링이나 캡처링이 문제를 일으킬 수 있습니다. 이런 경우, event.stopPropagation() 메소드를 사용하여 이벤트가 더 이상 전파되지 않도록 막을 수 있습니다.

document.getElementById("child").addEventListener("click", function(event) {
  event.stopPropagation();
  alert("버튼 클릭!");
});

이 코드는 #child 버튼을 클릭했을 때, 버블링을 막아 다른 요소로 이벤트가 전파되지 않게 합니다.

이벤트 버블링과 캡처링은 웹 개발에서 매우 중요한 개념입니다. 이를 통해 사용자와의 상호작용을 더 세밀하게 제어할 수 있으며, 복잡한 웹 애플리케이션을 만들 때 필수적인 기술이 됩니다. 오늘 배운 내용을 잘 활용하여 멋진 웹 사이트를 만들어보세요!