JavaScript - e.preventDefault() 와 e.stopPropagation() 의 차이점

 

 

 

특정 이벤트를 막고 다른 동작을 실행해야 하는 상황이 있다.

아래와 같이 <a> 안의 <div> 를 클릭하면, onClick 이벤트가 실행되야 하지만

현실은 다르다. href 를 통해 링크로 이동한다.

<a href="/home">
  <div onClick={() => console.log('클릭'}/>
</a>

 

 

그 이유는 이벤트 버블링 때문이다. 자식 → 부모 순으로 이벤트가 실행이 된다.

자식(온클릭) 이벤트 후, 부모(링크 이동) 이벤트까지 순서대로 실행되는 것이다

이럴 때 우리는 e.preventDefault()와 e.stopPropagation() 를 사용해서 부모까지의 흐름을 끊어주어 해결하였다.

그 시점에서 정확히 그 둘의 차이가 무엇인지 궁금해졌다.

 

 

 

실제 버블링 이슈를 어떻게 해결했는지 궁금하시다면 ... ? (아래 포스팅 클릭 ↓↓↓)

React(55) 겹친 영역에서 자식 이벤트만 발생시키기 (이벤트 버블링)

 

 

---

 

JavaScript - e.preventDefault()와 e.stopPropagation() 차이

 

e.preventDefault()

HTML 태그에 담긴 고유 이벤트의 기본동작을 막아준다. 하지만 이벤트 전파는 계속 된다.

preventDefault prevents the default action the browser makes on that event.
its default action should not be taken as it normally would be.
The event continues to propagate as usual, unless one of its event listeners calls stopPropagation()

 

 

e.stopPropagation()

캡쳐링이나 버블링의 전파만을 막아준다. 하지만 태그 안의 고유 기능은 동작한다. 그럴 때는 preventDefault() 를 사용해야 한다.

stopPropagation prevents further propagation of the current event in the capturing and bubbling phases.
It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed.
 

 

 

 

 

ref:

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation