event.stopPropagation(), event.preventDefault()

요약
이벤트 버블링에 대한 이해 이벤트 전파를 막고, 원하는 곳에서만 이벤트가 처리될 수 있도록 한다.
Tags
이벤트 버블링, 버블 업 이해하기event.stopPropagation()event.preventDefault()
 
 

이벤트 버블링, 버블 업 이해하기

notion image
자식에서 발생한 이벤트는 부모로도 순차적으로 전달된다.
버튼에 onPress를 설정했는데, 부모에도 onPress가 있을 경우 자식을 클릭하면 둘 다 실행된다.
여기서는 a onPress → li onPress → ul onPress 가 순차적으로 실행된다.
💡
이벤트가 퍼져나가는 현상을 전파(Propagation) 이라고 한다. 자식의 이벤트가 부모로 전파되는 현상을 버블업(Bubble Up) 이라고 한다.

event.stopPropagation()

자식에게 발생한 이벤트가 부모에게 전파되는 것을 방지하는 기능이다.

event.preventDefault()

a 태그의 경우 href 속성이 있다.
a 태그는 클릭 시 onPress에 대한 처리와, href에 대한 리다이렉트 기능 두 가지를 수행한다.
클릭 이벤트에 대한 처리만 하고 리다이렉션은 방지하고 싶을 때 꼼수로 href=”#” 을 넣곤 하는데, 한가지 이슈가 있다.
 
#은 웹브라우저의 최상단을 가리키는 앵커다.
따라서 href=”#”가 적힌 a 태그를 클릭하면 현재 페이지의 최상단으로 이동하게 된다.
 
event.preventDefault()는 이러한 상황을 방지한다.