# * DOM Event Handle

Written by 📝 Juunone

Web API Event의 stopPropagation, preventDefault Methods에 대해 설명하고자 한다.

이벤트 버블링이란 ?

• 자식에서 발생된 이벤트가 부모 노드에 순차적으로 전달되는 현상

이벤트 캡처링이란 ?

• 부모에서 발생된 이벤트가 자식 노드에 순차적으로 전달되는 현상

# event.stopPropagation

event.stopPropagation : 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막는다.

출처 : Screencasts dot org Youtube

위 이미지를 보면 사용자가 a 태그 클릭시 해당 태그를 감싸고 있는, li, ul 에 순차적으로 이벤트가 전달된다.
a click -> li click -> ul click 순으로 해당 노드들에 순차적으로 클릭 이벤트를 발생시킨다.
사용자의 의도와는 다르게 이벤트가 발생하게 된다.

# event.preventDefault

event.preventDefault : 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소한다.

preventDefault는 브라우저 이벤트를 작동하지 못하게 하는 method 이다.
<a>,<input>,<textarea> 와 같은 태그의 브라우저 기본 동작을 막을 수 있다.

# Reference