[vue] e.preventDefault();

preventDefault 란?

preventDefault 는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드이다.

preventDefault() 메서드는 이벤트가 전파되는것(버블링이나 캡처 단계)를 중지시키지는 않는다.

이벤트 버블링이란?

자식 element에서 발생된 event가 부모 element순으로 전달 되는 현상

이벤트 캡쳐링이란?

부모 element에서 발생된 event가 자식 element순으로 전달 되는 현상

event.stopPropagation();

이벤트가 상위 DOM으로 전달,전파를 하지 않도록 하는 코드입니다.

이벤트 전파를 막아 주지만 기본 이벤트를 막아주진 않습니다.

 

 

 

---

주로 사용되는 경우는

1. a태그를 눌렀을 때도 href링크로 이동하지 않게 할 경우

2. form 태그 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)

 

 

그 이유는 저기서 받는 event 에 대해 preventDefault 를 해주지 않았기 때문에 submit 됨과 동시에 창이 다시 실행되기 때문이죠. 그래서 다시 초기 화면으로 돌아오게 됩니다.

 

이 함수를 실행하면 밑에 정답! 혹은 땡! 이라는 문구가 뜰까요?

 

.

.

.

 

결론은 no 입니다. 잠시 0.1초 정도 보였다가 다시 사라질 것입니다.

그 이유는 저기서 받는 event 에 대해 preventDefault 를 해주지 않았기 때문에 submit 됨과 동시에 창이 다시 실행되기 때문이죠. 그래서 다시 초기 화면으로 돌아오게 됩니다.

 

출처: https://programming119.tistory.com/100 [개발자 아저씨들 힘을모아]

 

출처 :

http://megaton111.cafe24.com/2015/04/30/preventdefault-%EC%99%80-stoppropagation-%EC%B0%A8%EC%9D%B4/

preventDefault(); 와 stopPropagation(); 차이

https://programming119.tistory.com/100 [개발자 아저씨들 힘을모아]