[JavaScript] event.preventDefault() 이해하기

preventDefault()

HTML 요소의 기본 동작을 중지하고 사용자 정의 동작을 수행하고자 할 때 사용한다.

 

<주로 사용되는 경우>

1. 폼 제출 방지

사용자가 form에서 제출을 하기위해 submit 버튼을 누르면 기본적으로 페이지가 새로고침 된다.

이 때 폼 데이터를 서버로 전송하지 않고 JS를 사용하여 데이터를 처리하고자 할 때 preventDefault()로 폼 제출 이벤트를 중지하고 데이터를 처리할 수 있다.

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // 폼 제출 이벤트의 기본 동작 중지
  // 데이터를 수집하고 처리하는 작업 수행
});

 

* 서버로 전송하는 경우 이처럼 form 데이터를 서버로 전송하면 메소드를 사용할 필요가 없다.

<form action="server-url" method="POST">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">로그인</button>
</form>

 

 

2. 앵커 링크 동작 변경

앵커<a> 태그를 클릭하면 브라우저는 해당 링크의 URL로 이동한다.

그러나 때로는 페이지 이동을 막고 JS를 사용하여 원하는 동작을 수행하고자 할 때 사용한다.