[js] preventDefault() stopPropagation()

event.preventDefault();

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

브라우저 고유의 동작을 중단시켜주는 역할

<a>, <input>, <textarea> 의 기본 동작 막을 수 있다.

onSubmit을 했을 때, 페이지가 리프레쉬 되는 고유의 브라우저 동작을 막아줄 수 있다.

 

a태그는 적용된 href 링크값으로 페이지 이동을 해주는 기본적인 기능을 가지고 있는데

a태그를 클릭 했을 때 preventDefault() 메서드를 실행시켜 주면 페이지 이동을 하는 기본 기능을 막는 것이다.

event.preventDefault();

e.preventDefault();

 

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

(이벤트의 전파 과정을 이해하고 있지 못한다면 위 내용이 어떤 의미인지 모를 수도 있다)

 

이벤트 전파 관련 용어

- 버블링

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

 

- 캡쳐링

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

 

- 참고하면 좋을 사이트

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링

 

 

event.stopPropagation();

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

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

 

자식에서만 실행시키고 싶을 때 사용한다.

 

preventDefault() : 브라우저 고유의 행동을 막아주는 함수
stopPropagation() : 부모 엘리먼트로의 이벤트 전달을 막아주는 함수

 

 

---

참고사이트

 

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

preventDefault(); 와 stopPropagation(); 차이

https://velog.io/@yiyb0603/JS-e.preventDefault%EC%99%80-e.stopPropagation%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

[JS] e.preventDefault()와 e.stopPropagation()의 차이점