Event.preventDefault() 메소드란 ?

Event 인터페이스의 preventDefault() 메소드는 어떠한 이벤트에 대한 브라우저의 기본 동작을 실행하지 않도록 해주는 역할을 한다.

 

예를 들어 submit 이벤트는 Form을 제출할 때 트리거(새로고침)되는데, 이런 경우에 트리거를 방지하기 위해 사용할 수 있다.

 

<input type="submit">을 클릭하거나 input 필드에서 엔터 키를 눌렀을 경우에 발생하는 submit의 기본 동작인 트리거를 방지하는 코드는 다음과 같다.

 

<form class="loginForm hidden">
      <input type="text" placeholder="What is your name?" class="loginInput" />
      <input type="submit" class="loginBtn"></input>
</form>

const loginForm = document.querySelector(".loginForm");

function onLogin(event) {
  event.preventDefault();
}

loginForm.addEventListener("submit", onLogin);

 

Form을 제출하더라도 트리거(새로고침)이 발생하지 않는다.