[javascript] event.preventDefault()

1. 사용하는 경우

 

페이지 이동을 하는 기본동작을 빼주어야 할 때 사용함.

우리가 보통 화면의 버튼에 이벤트를 걸기 위해서는 addEventListener 함수를 사용한다.

요소.addEventListener("이벤트", 함수명);

이벤트 중에서도 submit 이벤트는 form 내용을 제출하는 이벤트로,
submit을 하게되면 action로 지정된 url로 이동하거나 url이 없는 경우에는 새로고침이 된다.

<form action="/getMemberInfo.do"> 
	...
</form>

페이지 내 구조상, 여러 개의 form이 있고 각자 submit을 사용해야 할 필요가 있을 때 !
페이지 이동 없이 input 내용을 submit하여 데이터를 주고 받을 수 있는 ajax 기능을 사용하게 된다.

다만 ajax는 제이쿼리에 있는 기능이며, vanilla script 로 구현하기 위해서는 submit 이벤트에서 페이지 이동을 하는 기본동작을 빼주어야 한다.

이럴 때 preventDefault() 함수를 사용하게 된다. 

 

 

2. 동작설명

 

모든 함수는 호출 시 전달되는 기본 event 객체가 있으며 이 객체를 이용한다. 

e.preventDefault();

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

function donLoginSubmit(e){ // --> 아무 이름이나 적어도 사용가능 / e, event, evt, tt 등
    e.preventDefault(); // --> 기본 event 작동 해제함. 
    console.log(e);
}
loginForm.addEventListener("submit", donLoginSubmit); // --> 함수 호출 시 기본 event 객체 발생+전달됨