[JS] 이벤트 동작 막기, event.preventDefault()

event.preventDefault() 이해하기

브라우저의 기본 이벤트 동작을 막는 메서드이다. event.preventDefault()는 이벤트를 막지만 이벤트 리스너의 실행을 멈추진 않는다. 폼을 제출할 때 동일한 이벤트 안에서 submit()을 다시 호출하면 무한 루프에 빠질 수 있으니 유의해서 사용해야한다.

 

---

 

 

폼 제출 방지하기

폼은 기본적으로 페이지를 새로고침하는데 event.preventDefault()는 이 새로고침을 막아주며, 데이터 보호에 유용하다. 따라서 입력 검증, 데이터 전송 등을 먼저 처리할 수 있다.

<form id="myForm">
  <input type="text" placeholder="이름 입력" />
  <button type="submit">제출</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 페이지 새로고침 방지
  alert('폼 제출이 방지되었습니다!');
});
</script>

 

 

 

링크 클릭 방지하기

a 태그는 클릭 시 지정된 URL로 이동하지만, event.preventDefault()를 사용하면 이동을 막을 수 있다. 유효성 검사나 사용자 확인(alert)을 거친 뒤 이동할 때 유용하게 쓸 수 있다.

<a href="https://www.example.com" id="myLink">클릭해보세요</a>

<script>
document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault(); // 링크 이동 방지
  alert('링크 이동이 막혔습니다!');
});
</script>

 

 

 

---

 

 

event.preventDefault()를 꼭 사용해야 하는 곳

유효성 검사(Validation) 시

폼을 제출하기 전에 입력값이 올바른지 확인할 때 필요하다. 예를 들어, 이름, 비밀번호, 주소 등이 비어있거나 잘못 입력된 경우 event.preventDefault()로 제출을 막고 사용자에게 alert 등을 통해 알림을 줄 수 있다.

document.querySelector('form').addEventListener('submit', function(event) {
  const input = document.querySelector('input').value;

  if (!input) {
    event.preventDefault(); // 입력값이 없으면 제출 방지
    alert('이름을 입력해주세요!');
  }
});

 

AJAX 요청(비동기 요청)

AJAX는 페이지를 새로고침하지 않고 서버와 데이터를 주고받는 것이다. 이때 event.preventDefault()를 사용하면 기본 제출 동작을 막고, AJAX로 서버에 데이터를 전달할 수 있다.

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // 기본 제출 방지
  const data = { name: document.querySelector('#name').value };

  fetch('/submit', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json' }
  })
  .then(response => response.json())
  .then(result => console.log(result))
  .catch(error => console.error('Error:', error));
});

 

SPA(싱글 페이지 애플리케이션)

React 같은 SPA는 페이지 전환 없이 화면만 갱신한다. 폼 제출 시 페이지 리로딩을 방지하기 위해 event.preventDefault()를 사용해 화면만 동적으로 업데이트할 수 있다.

const handleSubmit = (event) => {
  event.preventDefault(); // 페이지 리로딩 방지
  console.log('폼 제출!');
}