event.preventDefault

---

DOM 요소는 저마다 기본 동작이 있다.
예를 들어, a요소를 클릭하면 href attribute에 지정된 링크로 이동한다.
checkbox 또는 radio요소를 클릭하면 체크 또는 해제된다.
form요소에서 submit이벤트가 발생할 경우 페이지가 새로고침된다.

위와 같은 기본 동작을 원하지 않을 경우 event.preventDefault()를 작성하면 된다.

이벤트 객체의 preventDefault 메서드는 이러한 DOM 요소의 기본 동작을 중단시킨다.

event.stopPropagation

---

이벤트 객체의 stopPropagation 메서드는 이벤트 전파를 중지시킨다.
하위 DOM 요소의 이벤트를 개별적으로 처리하기 위해 event.stopPropagation()을 작성하면 이벤트 전파를 중지시킨다.

여기서 중요한 점은 웬만해선 이벤트 전파를 막지 않는 것이 좋다는 것이다.

꼭 필요한 경우를 제외하곤 버블링을 막지 마세요!
버블링은 유용합니다. 버블링을 꼭 멈춰야 하는 명백한 상황이 아니라면 버블링을 막지 마세요. 아키텍처를 잘 고려해 진짜 막아야 하는 상황에서만 버블링을 막으세요.
event.stopPropagation()은 추후에 문제가 될 수 있는 상황을 만들어낼 수 있습니다.
이벤트 버블링을 막아야 하는 경우는 거의 없습니다. 버블링을 막아야 해결되는 문제라면 커스텀 이벤트 등을 사용해 문제를 해결할 수 있습니다.

---

From 버블링과 캡쳐링