이벤트 버블링과 캡처링에 대해 설명해주세요.

이벤트 버블링은 이벤트가 발생했을 때 가장 안쪽의 타겟 요소에서 시작하여 부모 요소로 전파되는 방식입니다. 예를 들어, 버튼을 클릭했을 때 버튼 자체에서 이벤트가 발생한 후 이 이벤트가 상위 요소인 div, body, document, window로 전파되는 과정을 거치게 됩니다. 기본적으로 브라우저는 이벤트 전파를 버블링 단계에서 처리하도록 설계되어 있습니다.

반면, 이벤트 캡처링은 이와 반대 방향으로 진행됩니다. 즉, 이벤트가 최상위 부모 요소에서부터 시작해 점점 타겟 요소로 내려오면서 전파됩니다. 예를 들어, window에서 이벤트가 시작되어 document, body, div를 거쳐 버튼에 도달하게 되는 방식입니다. 기본적으로 캡처링 단계는 비활성화되어 있지만, addEventListener 함수의 세 번째 옵션으로 캡처링을 활성화할 수 있습니다. 이 옵션에 true를 설정하면 캡처링 단계에서 이벤트를 처리할 수 있습니다.

버블링과 캡처링은 각각의 특성 덕분에 서로 다른 상황에서 유용하게 활용됩니다. 버블링은 특히 이벤트 위임 같은 패턴에서 활용도가 높습니다. 예를 들어, 동적으로 추가되는 자식 요소가 있는 상황에서는 부모 요소에 이벤트 리스너를 등록하여 자식 요소들의 이벤트를 효율적으로 관리할 수 있습니다. 이렇게 하면 각각의 자식 요소마다 이벤트 리스너를 따로 등록할 필요가 없으므로 성능적인 이점이 생깁니다. 예를 들어, 리스트 항목(li)의 클릭 이벤트를 처리할 때 부모 요소인 ul에 리스너를 하나만 등록하여 모든 li의 클릭 이벤트를 처리할 수 있습니다.

한편, 캡처링은 부모 요소에서 자식 요소보다 먼저 이벤트를 처리해야 할 때 유용합니다. 예를 들어, 페이지의 전체적인 트래킹이나 로깅 기능을 구현할 때 캡처링 단계에서 이벤트를 처리하면 자식 요소에서의 추가 이벤트 처리 여부와 관계없이 부모에서 로직을 먼저 실행할 수 있습니다.

이런 이벤트 버블링과 캡처링 과정에서 발생할 수 있는 문제는 없을까요? 🤔
이벤트 버블링과 캡처링 과정에서 발생할 수 있는 문제는, 이벤트 중첩으로 인해 동일 이벤트가 중복 처리되는 상황, 캡처링 단계에서 불필요한 이벤트가 처리되는 성능 문제, 이벤트 위임 시 타겟 오작동 등 다양한 사례가 있습니다.

하지만 이러한 문제들을 제어하기 위해 두 가지 주요 메서드를 사용할 수 있습니다.

첫째, stopPropagation 메서드를 호출하면 특정 이벤트가 현재 단계에서 멈추고 더 이상 부모나 자식으로 전파되지 않도록 할 수 있습니다. 이는 복잡한 UI 구조에서 불필요한 이벤트 처리를 방지할 때 유용합니다.

둘째, preventDefault 메서드를 사용하면 링크 클릭 시 페이지 이동이나 폼 제출과 같은 브라우저의 기본 동작을 방지할 수 있습니다.