event의 기본 행동 막기 / preventDefalut()

preventDefalut()

preventDefault는 어떤 event의 기본 행동이든지 발생되지 않도록 막는 거다.

event.preventDefault();

 

기본 행동이란 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작.

form은 submit 하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다.

예시

하나 더 HTML에 a 태그를 추가해서 링크로 이동하지 않게 해 보자.

<a href=https://www.google.com>google.com</a>

anchor(link)의 기본 동작은 클릭 시 다른 페이지로 이동하는 것이다.

클릭시 알람이 뜨는 event를 작성해보면

const link = document.querySelector("a")

function clicklink() {
    alert("Don't go link!")
}

link.addEventListener("click", clicklink);

클릭하면 알람이 뜨는데 알람 창을 닫으면 기본 동작이 작동해서 링크로 이동한다.

아무리 알람이 나온다고 해도 기본 동작은 그래도 작동한다.

const link = document.querySelector("a")

function clicklink(event) {
    event.preventDefault();
    console.dir(event);
}

link.addEventListener("click", clicklink);