웹 개발을 할 때, 때로는 이벤트가 상위 요소로 전파되지 않도록 해야 할 때가 있습니다. 예를 들어, 하위 요소에서 발생한 이벤트가 상위 요소로 계속 전파되지 않도록 막아야 하는 경우가 있을 수 있습니다.

이벤트 전파란 무엇인가요?

우선 이벤트 전파에 대해 간단히 알아보겠습니다. HTML 요소는 중첩 관계를 가질 수 있으며, 하위 요소의 이벤트가 상위 요소로 전파될 수 있습니다.

이벤트 전파를 막는 방법

stopPropagation 메서드를 사용하기

자바스크립트에서는 stopPropagation 메서드를 사용하여 이벤트 전파를 막을 수 있습니다.

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

위의 예시에서 stopPropagation 메서드는 click 이벤트가 발생했을 때, 상위 요소로의 전파를 막습니다.

capture 사용하기

이벤트 리스너를 추가할 때 세 번째 매개변수로 capture 값을 true로 설정하여 해당 이벤트가 캡처 단계에서 처리되도록 할 수 있습니다. 이를 통해 상위 요소로의 전파를 막을 수 있습니다.

element.addEventListener('click', function(event) {
  // 이벤트 처리
}, true);

결론

이벤트 전파를 막는 것은 웹 애플리케이션의 동작을 조절하고 예상치 못한 동작을 방지하는 데 도움이 됩니다. stopPropagation 메서드와 capture를 사용하여 적절하게 이벤트 전파를 제어할 수 있습니다.

MDN Web Docs - Event.stopPropagation()