[개념잡기] e.preventDefault() 와 stopPropagation() 의 차이

e.preventDefault()와 e.stopPropagation()의 차이

두개의 코드 모두 이벤트 관련 동작에서 많이 사용되는 코드이다. 둘의 차이점은 무엇일까 알아보자.

e.preventDefault()

html 에서 a 태그나 submit 태그는 고유의 동작이 있다. 페이지를 이동시킨다거나 form 안에 있는 input 등을 전송한다던가 그러한 동작이 있는데 e.preventDefault 는 그 동작을 중단시킨다.

해당 a 태그를 클릭했을 경우 블로그로 이동하는 것을 확인할 수 있다.

이 코드에 e.preventDefault 를 넣으면

a 태그의 href 속성이 중단되고 e.preventDefault()를 띄우는 것을 알 수 있다.

 

e.stopPropagation()

이 코드를 보면 단지 .last-el 만 클릭했을 뿐인데 부모 엘리먼트에게도 이벤트가 전파 됨을 알 수 있다. 이때 사용하는 것이 e.stopPropagation 이다. e.stopPropagation는 이벤트가 상위 엘리먼트에 전달되지 않게 막아 준다.

두번째 줄에 e.stopPropagation(); 를 추가시킨것 만으로 이벤트를 중단 시킬수 있다.

 

정리

e.preventDefault는 고유 동작을 중단시키고, e.stopPropagation 는 상위 엘리먼트들로의 이벤트 전파를 중단시킨다.