Prologue

vanilla js로 코드를 작성하다가 문득 의문이 들었다.
e.preventDefault()랑 e.stopPropagation()은 둘 다 '이벤트를 막는다'라고는 알고 있는데, 둘의 차이점이 무엇이었더라?

바로 생각이 나지 않는 것에 대해 스스로에게 놀라서, 이참에 정리해두려고 한다.

e.preventDefault()

preventDefault()는 이벤트의 기본 동작을 막는 메서드이다.

즉, preventDefault()는 폼 제출, 링크 이동 등 기본적으로 브라우저가 행하는 동작을 막을 때 사용된다.

위의 예시에서, e.preventDefault()를 사용함으로써 <a>태그를 클릭해도 href 속성에 저장된 https://www.google.com으로 이동하지 않음을 볼 수 있다.

e.stopPropagation()

stopPropagation()은 이벤트의 상위 요소로의 전파를 막는 메서드이다.

즉, stopPropagation()은 이벤트가 부모 요소로 전파되는 것을 막을 때 사용된다.

위의 예시에서, 만약 e.stopPropagation()을 제거하면 #child를 클릭했을 때 #parent의 이벤트 핸들러도 실행되어야 한다.

정리

• e.preventDefault()
  • 역할: 기본 동작(ex: 링크 이동, 폼 제출) 방지
  • 예시: <a>클릭 시 페이지 이동 막기, <form>제출 막기

• e.stopPropagation()
  • 역할: 부모 요소로의 이벤트 전파 방지
  • 예시: 자식 요소 클릭 시 부모 요소의 이벤트 실행 막기