e.preventDefault(), e.stopPagation()

• e.preventDefault()
  prevent(막다)Default(고정값), 즉 고정적인 부분을 막는다 라는 것인데 어떤 걸 막는다는 걸까?

HTML에서 a태그를 예시로 들어보겠다. a태그는 페이지 이동을 한다는 Default가 있는 태그이다.
그리고 어떤 녀석이 코드를 a 태그를 클릭하면 alert만 뜨게 하고 페이지 이동은 하지 않게 짜고 싶다고 한다.

이 때, e.preventDefault()을 사용하는 것이다.

 a태그.addEventListener("click", (e) => {
  	e.preventDefault()
    alert("안움직일거야.");
 });

a 태그를 클릭하면 e.preventDefault() 통해 페이지를 이동하는 Default가 막히고 이후 alert만 뜨는 것이다.

• e.stopPagation()
  stop(멈춰)Pagation(전파,증식), 즉 전파 혹은 증식을 멈추게 한다는 것인데, 어떤 전파와 증식을 말하는 걸까?

우린 먼저 버블링에대한 개념을 알아야한다.

<ul onclick="ClickUl()">
    <li>
        <div onclick="ClickDiv()"></div>
    </li>
</ul>

여기서 div를 클릭하여 ClickDiv()만 실행하게끔 하고 싶을 수 있지만, 아쉽게도 ClickUl() 또한 함께 일어날 수 있다.

이때 ClickDiv() 함수에 e.stopPagation()을 넣어준다면 ClickDiv()만 온전히 실행되도록 할 수 있을 것이다 :)