[React] e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation()

 

1. e.preventDefailt()

- 브라우저 고유의 동작을 중단시켜주는 역할. preventDefault() 메서드는 이벤트가 전파되는 것(*버블링이나 *캡쳐 단계)를 중지시키지는 않는다.

주로 사용되는 경우는
  1. a 태그를 눌렀을 때 href 링크로 이동하지 않게 할 경우
  2. form 태그 안에 submit 역할을 하는 버튼을 눌렀을 때 새로고침 하고싶지 않은 경우

* 이벤트 버블링이란? 자식 element에서 발생된 event가 부모 element순으로 전달되는 현상
* 이벤트 캡쳐링이란? 부모 element에서 발생된 event가 자삭 element순으로 전달되는 현상

반응형

2. e.stopPropagation()

- 부모 엘리먼트에게 이벤트 전달을 중단시켜주는 역할. stopPropagation() 메서드는 이벤트 전파를 막아 주지만, 기본 이벤트를 막아주진 않는다.

3.e.stopImmediatePropagation()

- 같은 이벤트에서 다른 리스너들이 불려지는 것을 막는 역할. 상위와 하위, 현재에 있는 다른 이벤트도 동작하지 않도록 중단하고 첫번째 이벤트만 실행한다.