1. event.preventDefault()

기본으로 정의된 이벤트를 작동하지 못하게 막는 메서드

a태그 처럼 클릭 이벤트 외에 별도의 브라우저 행동을 막기 위해 사용된다.

const preventClickEvent = (e) => {
  e.preventDefault();
}

// ex) a태그는 적용된 href 링크값으로 페이지 이동을 해주는 기본 적인 기능을 가지고 있는데 
// a태그에 preventDefault() 메서드를 실행시켜 주면 페이지 이동을 하는 기본 기능을 막는다.

2. event.stopPropagation()

이벤트가 상위 DOM으로 전달,전파를 하지 않도록 하는 코드, 이벤트 전파를 막아 주지만 기본 이벤트를 막아주지는 않는다.

사용자가 마우스로 웹페이지 내의 버튼을 클릭했을 때 대부분의 사람들은 버튼만 반응했다고 생각하게 되지만 웹페이지 내부에서는 버튼을 감싸고 잇는 부모태그들 또한 클릭 이벤트에 반응하게 된다. 이것을 Bubble up이라고 하는데 이 Bubble up을 막아주는 것이 stopPropagation()이다.

<ul>
  <li>
    <a href='#' class='expand'>link</a>
  </li>
</ul>

사용자가 a태그를 클릭했을 때 클릭이벤트는 a태그를 감싸고 있는 li,ul 태그로 순차적으로 전달되게 된다.

a태그의 onclick ⇒ li태그의 onclick ⇒ ul태그의 onclick을 실행

const stopPropagation = (e) => {
  e.stopPropagation()
}