event.preventDefault() vs event.stopPropagation() 에 대하여...

<회고록>

나는 오늘 바닐라 js로 SPA(single page application)을 구현하였다.

오늘은 이를 구현하면서 내가 느꼈던 어려움들 중에 event.preventDefault() vs event.stopPropagation() 정리를 할까 생각중이다.

 

1. event.preventDefault()

event.preventDefault()는 현재의 동작을 중단 시킨다.

이를 구체적으로 말하자면 예를 들어 a태그 form태그 등은 이벤트 처리시 다른 화면을 이동하는 경우가 빈번하다.

이때 event.preventDefault()는 다른 페이지로 이동하는 것을 막는 역할을 하게 된다.

따라서 event.preventDefault()는 해당 이벤트가 발생하는 것을 막고 싶을 때 사용된다.

이를 이벤트 버블링과 연관을 짓기에 고려해야할 변수들이 많다.

2.event.stopPropagation()

event.stopPropagation()는 이벤트 처리가 부모 DOM까지 올라가는 것을 막는다.

여기서 event.stopPropagation()와의 차이점은 해당 이벤트를 중지 시키는 것이 아니라 현재 이벤트를 부모 DOM까지 올라가는 것을 막는 것이다.  따라서 event.stopPropagation()같은 경우에는 이벤트 버블링을 막고 싶을 때 사용을 하게 된다.