preventDefault(); 와 stopPropagation(); 차이

event.preventDefault();

preventDefault 는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드입니다.

<a>,<input>,<textarea>의 기본 동작을 막을 수 있습니다.

event.stopPropagation();

이벤트가 상위 DOM으로 전달,전파를 하지 않도록 하는 코드입니다.

이벤트 전파를 막아 주지만 기본 이벤트를 막아주진 않습니다.

아래는 간단한 예제소스입니다. 클릭할 경우 div 요소의 이벤트도 발생할 것으로 예상할 수 있습니다. stopPropagation()을 사용하여 이벤트 버블링을 제거하여줍니다.

<div onclick="showmsg()">
  <p onclick="showmsg()">Click Me!!</p>
</div>

function showmsg = function() {
  event.stopPropagation();
  console.log('Webisfree');
}