[JavaScript] 자꾸 까먹는 e.preventDefault & e.stopPropagation

자바스크립트에서 이벤트는 아주 많이 사용되는 녀석이다. 
사용된다고 말할 수준이 아닌 뺄 수 었는 녀석이다. 
 
이때 JavaScript의 이벤트는 자식에서 부모로 전파가 된다. 
이것을 버블링이라고 하는데, 조금 더 자세하게 설명하면 요소에 이벤트가 발생하면 제일 상단의 요소를 만날 때 까지 
모든 이벤트를 전파시킨다. 
 
또는 a 태그는 클릭하면 페이지를 이동시키고, form 태그는 내부 입력값을 전송한다. 
이것은 자식 요소를 클릭해도 동일한 기능을 한다. 
 
이러한 이벤트 전파를 막아버리는 것이 바로 e.preventDefault와 e.stopPropagation이다.
 

e.preventDefault 

앞서 이야기 했지만 form 태그나 a 태그는 각각 특수한 기능을 하고 있다. 
form은 form 안에 있는 입력 요소의 값을 전송하는 기능을 하고 있으며, a 태그는 페이지를 이동시키는 기능을 한다. 
 
아주 많이 사용되는 기능이라 html을 조금만 공부한 사람이면 모두 알텐데, 이러한 기능을 e.preventDefault는 
중지시킨다. 
 

e.stopPropagation

부모 요소에게 이벤트가 전파되는 것을 막는 기능이 e.stopPropagation 이다. 
자식 요소에게 e.stopPropagation을 사용하면 상위 요소에게 이벤트가 전달이 되지 않도록 막아준다. 
 
이 두 요소는 엄청 많이 사용되고 사실상 기능 자체를 모르는 사람은 없을 것이다. 
 
하지만 간혹 a 태그의 이벤트를 막기 위해서 e.stopPropagation을 사용하거나 부모 요소에게 이벤트 전파를 막기 위해서 
e.preventDefault를 사용하는 경우가 있어서 정리하면서 외우기 위해서 한번 작성해본다.