JavaScript에서 stopPropagation() 메서드는 이벤트의 전파를 막는 데 사용됩니다. HTML에서는 이벤트가 부모 요소에서 자식 요소로 전파되는 방식으로 동작합니다. 하위 요소에서 이벤트가 발생했을 때, 해당 이벤트가 상위 요소로 계속 전파되는데, stopPropagation() 메서드를 사용하면 이러한 이벤트 전파를 중지할 수 있습니다.

기본 구문

event.stopPropagation();

사용 예시

아래 예시에서는 버튼을 클릭할 때 기본 동작을 방지하고, 이벤트 전파를 중지시키는 방법을 보여줍니다.

document.getElementById("myButton").addEventListener("click", function(event) {
  event.preventDefault(); // 버튼의 기본 동작 방지
  event.stopPropagation(); // 이벤트 전파 중지
  // 추가적인 작업 수행
});

위의 예시에서 stopPropagation() 메서드를 통해 이벤트 전파를 중지시킴으로써, 상위 요소까지 이벤트가 전파되는 것을 막게 됩니다.

참고 자료

• MDN Web Docs: event.stopPropagation()

stopPropagation() 메서드를 사용하여 이벤트 전파를 중지시키면 특정 상황에서 유용한 기능을 구현할 수 있습니다.