JavaScript preventDefault()란?

a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나, 창이 새로고침하여 실행된다.

preventDefault 를 통해 이러한 동작을 막아줄 수 있다.

 

1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우

2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)

 

예제

const form = document.getElementById('form');

form.addEventListener('submit', function (e) {
    e.preventDefault();
    console.log('submit');
});

preventDefault()를 하지 않을 경우, submit버튼을 누르면 submit이 console창에 출력되었다가 사라지는 현상을 볼 수 있다.

preventDefault()를 하면, submit버튼을 누르면 submit이 console창에 출력되어 그대로 있는다.