이미지 출처: 버블링과 캡처링

이벤트 버블링 소개

자바스크립트에서 중요한 개념 중 하나인 '이벤트 버블링'에 대해 이야기해보려고 합니다. 이벤트 버블링은 DOM 요소에서 발생한 이벤트가 상위 요소로 전파되는 방식을 의미합니다.

이벤트 버블링은 다음과 같은 상황에서 흔히 발생합니다. 예를 들어, 버튼이나 링크 등의 HTML 요소를 클릭하면 'click' 이벤트가 발생합니다. 이 'click' 이벤트는 해당 요소에서 시작하여 상위 요소로 전파되며, 이를 '이벤트 버블링'이라고 합니다.

이런 이벤트 버블링은 때로는 유용하지만, 때때로는 문제를 일으킬 수 있습니다. 예를 들어, 특정 요소에 이벤트 핸들러를 연결했는데, 상위 요소에도 같은 이벤트 핸들러가 연결되어 있다면, 의도하지 않게 두 개의 이벤트가 발생할 수 있습니다.

이벤트 버블링 제어하기

그럼 이런 상황을 어떻게 제어할 수 있을까요? 그 답은 'event.stopPropagation()'입니다. 이 함수를 이용하면 이벤트가 상위 요소로 전파되는 것을 막을 수 있습니다.

예를 들어, 다음과 같이 작성할 수 있습니다.

element.addEventListener('click', function(event) {
  event.stopPropagation();
});

위 코드를 사용하면, 해당 요소에서 'click' 이벤트가 발생할 때 이벤트가 상위 요소로 전파되는 것을 막을 수 있습니다. 이렇게 하면 의도치 않은 이벤트 발생을 피할 수 있습니다.

이벤트 버블링은 자바스크립트에서 중요한 개념이며, 이를 제어하는 방법을 알고 있으면 보다 효율적인 웹 개발이 가능합니다.

이벤트 캡쳐링 이해하기

이벤트 버블링과 함께 이해해야 하는 중요한 개념이 바로 '이벤트 캡쳐링(Event Capturing)'입니다. 이벤트 캡쳐링은 이벤트 버블링의 반대 방향으로 이벤트를 전파하는 방식입니다. 즉, 상위 요소에서 하위 요소로 이벤트를 전달합니다. 이벤트 버블링이 '버블이 표면으로 올라오는 것'을 묘사한다면, 이벤트 캡쳐링은 '물고기가 물속에서 위로 향하는 것'을 묘사하고 있다고 이해하시면 좋습니다.

이벤트 캡쳐링은 이벤트 리스너에 세 번째 매개변수로 true를 지정함으로써 사용할 수 있습니다.

element.addEventListener('click', function(event) {
  // 이벤트 처리 코드
}, true); // 이벤트 캡쳐링을 활성화

위의 코드에서 true 매개변수는 이벤트가 하위 요소로 '캡쳐'되는 단계에서 이벤트 핸들러를 실행하도록 지시합니다. 이렇게 하면 이벤트가 버블링 단계에 도달하기 전에 이벤트를 처리할 수 있습니다.

하지만 주의할 점은, 'event.stopPropagation()'은 이벤트 전파를 완전히 중단하기 때문에, 버블링이나 캡쳐링 단계에서 이를 호출하면 다른 단계의 이벤트 처리가 제대로 이루어지지 않을 수 있습니다. 따라서 이 메서드를 사용할 때는 항상 신중해야 합니다.

event.stopPropagation() 사용 시 주의점

'event.stopPropagation()' 메서드는 이벤트의 전파를 중단시키는 역할을 합니다. 그러나 이 메서드를 사용할 때는 항상 주의해야 합니다. 이유는, 때때로 이벤트의 전파를 막는 것이 예상치 못한 문제를 일으킬 수 있기 때문입니다.

예를 들어, 웹 페이지에서 특정 요소에 'click' 이벤트 핸들러를 추가하고, 이 이벤트 핸들러 내에서 'event.stopPropagation()'을 호출했다고 가정해봅시다. 이렇게 하면 해당 요소에서 발생한 'click' 이벤트는 상위 요소로 전파되지 않게 됩니다. 그런데 만약 상위 요소에도 'click' 이벤트에 반응하는 코드가 있다면, 이 코드는 더 이상 실행되지 않게 됩니다. 이는 우리가 원하는 결과가 아닐 수 있습니다.

또한, 'event.stopPropagation()'은 이벤트 버블링뿐만 아니라 이벤트 캡쳐링도 중단시킵니다. 따라서 이 메서드를 호출하면 이벤트의 전파 단계에 따라 실행되어야 할 다른 이벤트 핸들러들이 제대로 작동하지 않을 수 있습니다.

이런 이유로, 'event.stopPropagation()'은 신중하게 사용해야 합니다. 이 메서드를 사용하기 전에, 이벤트 전파를 중단시키는 것이 정말 필요한지, 그리고 이로 인해 발생할 수 있는 부작용을 충분히 고려해보아야 합니다.