event.preventDefault()

어떤 element에서 발생한 이벤트는 부모 혹은 자식에게 전파되게 되는데, 이때 전파되는 방향에 따라 버블링(bubbling), 캡쳐링(capturing)이라고 부른다.

1. Bubbling

Bubbling은 이벤트가 발생한 element부터 조상들에게 순차적으로 이벤트가 전파되는 방식이다.

2. Capturing

Capturing은 이벤트가 발생한 element부터 자식들에게 순차적으로 이벤트가 전파되는 방식이다.

 

 

이러한 이벤트 전파때문에 이벤트를 사용할 때 원치 않은 동작들이 나오는데

이러한것들을 막기 위해 아래의 API를 사용해야한다.

 

event.preventDefault()

현재 이벤트의 default 동작을 중단한다. 예를 들면 a 태그의 경우 클릭하면 명시된 href로 이동하는 것이 default 동작이다.

 

event.stopPropagation()

현재 이벤트가 bubbling 혹은 capturing 되는 것을 막는다.

 

event.stopImmediatePropagation()

bubbling 혹은 capturing 뿐만 아니라, 해당 개체에 걸린 현재 event를 제외한, 다른 event들의 동작까지 막는다.

 

return false

jQuery event handler의 경우는, stopPropagation()과 stopImmediatePropagation()을 모두 수행한 것과 같고 그 외의 handler 경우(non-jQuery)에서는, preventDefault()를 수행한 것과 같다.

 

https://ygnoh.github.io/javascript/2017/07/02/Javascript-Prevent-Event-Propagation.html

Javascript 이벤트 전파(bubbling, capturing)와 중단