e.preventDefault() ,e.stopPropagation() ?

몇몇 태그는 내장된 고유 기능이 있다.

form 태그는 submit될 시에 페이지를 새로 고침을 한다.

이런 것들을 방지하기 위해 e.preventDefault()를 사용한다.

 

e.stopPropagation() 은 이벤트 버블링과 관련.

html 태그 안에서 자식에게 이벤트가 발생하면 특정 함수가 발생되도록 이벤트 핸들러를 심어놓는다.

ex) onClick = {() => console.log('hi')}

그러면 이벤트가 발생한 자식을 기점으로 부모에서부터 위로 존재하는 모든 태그의 끝까지 순차적으로 이벤트 핸들러가 동작한다.

이것을 막기 위해 e.stopPropagation() 을 사용한다.

하지만 이벤트 버블링을 막아야 할 상황은 거의 없다고 하기 때문에 e.stopPropagation() 의 사용은 권장하지 않는다.

 

• focus 이벤트와 같이 몇몇 이벤트를 제외하곤 거의 모든 이벤트는 버블링된다.
• this (event.currentTarget) : 현재요소 <form> 요소에 있는 핸들러가 동작했으므로 <form> 요소를 가리킴
• event.target - 폼 안쪽에 실제 클릭한 요소를 가리킴
• 꼭 필요한 경우를 제외하곤 버블링을 막지 마세요!
  • 버블링을 막아야 해결되는 문제라면 커스텀 이벤트 등을 사용해 문제를 해결할 수 있다.
  • 핸들러의 event 객체에 데이터를 저장해 다른 핸들러에서 읽을 수 있게 하면, 아래쪽에서 무슨 일이 일어나는지를 부모요소의 핸들러에게 전달할 수 있으므로,
  • 위와 같은 방법으로도 이벤트 버블링을 통제할 수 있습니다!

 

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

버블링과 캡처링