[jQuery] event preventDefault 설명과 사용방법 예제

event.preventDefault()는 주로 HTML 문서에서 폼 제출이나 링크 클릭 등의 기본 동작을 막기 위해 사용됩니다. 이는 이벤트가 발생했을 때, 해당 이벤트에 연결된 브라우저의 기본 동작(예: 폼 제출, 링크 이동 등)을 중지시킵니다. 이 함수는 특히 JavaScript와 jQuery에서 많이 사용되며, 사용자 정의 동작을 적용하거나 특정 조건에서만 기본 동작이 일어나도록 제어할 때 유용합니다.

event.preventDefault()의 기본적인 역할

HTML에서 링크를 클릭하면 기본적으로 해당 링크의 URL로 이동하거나, 폼을 제출하면 폼 데이터가 서버로 전송됩니다. 하지만 이와 같은 기본 동작을 방지해야 할 때가 있습니다. 예를 들어:

• 링크 클릭 후 페이지가 새로고침되면 안 되는 경우
• 폼 검증이 완료되기 전까지 제출을 막아야 하는 경우
• 특정 인터랙션을 동적으로 처리하고자 할 때

이때 event.preventDefault()를 호출하면 해당 기본 동작을 막고, 우리가 원하는 커스텀 로직을 실행할 수 있습니다.

사용 예시 1: 폼 검증과 함께 사용하는 경우

사용자가 입력한 데이터가 유효하지 않을 때 폼 제출을 막고, 에러 메시지를 표시하는 예입니다.

<form id="myForm">
  <input type="text" id="name" placeholder="Enter your name">
  <button type="submit">Submit</button>
</form>

<script>
  $('#myForm').on('submit', function(event) {
    var name = $('#name').val();
    if (!name) {
      event.preventDefault();  // 폼 제출 방지
      alert('Name field cannot be empty!');
    }
  });
</script>

 

위 코드는 사용자가 name 필드를 비워둔 상태에서 폼을 제출할 경우, 폼 제출이 막히고 경고창이 표시됩니다. 기본적인 폼 제출 동작을 막음으로써, 검증이 완료되지 않으면 서버로 데이터가 전송되지 않도록 제어하는 것입니다.

사용 예시 2: 링크의 기본 동작 방지

일반적인 링크 클릭 동작은 사용자가 클릭한 URL로 이동하는 것입니다. 하지만, JavaScript로 동적으로 컨텐츠를 변경하거나 AJAX 요청을 통해 데이터를 가져오고자 할 때는 이동을 막아야 할 수 있습니다.

<a href="https://example.com" id="myLink">Click me</a>

<script>
  $('#myLink').on('click', function(event) {
    event.preventDefault();  // 링크 이동 방지
    alert('Link was clicked, but page won\'t change!');
  });
</script>

 

여기서 링크를 클릭하면 원래는 https://example.com으로 이동해야 하지만, event.preventDefault()를 사용했기 때문에 페이지 이동이 일어나지 않고 경고창만 표시됩니다. 이와 같이, 링크 클릭 이벤트를 중단하고 원하는 동작을 실행할 수 있습니다.

사용 예시 3: 동적으로 사용자 동작 처리

버튼 클릭 시 기본 동작을 막고, AJAX를 통해 데이터를 동적으로 처리하는 상황에서도 event.preventDefault()가 사용됩니다. 아래는 AJAX 요청을 사용하여 폼 데이터를 서버로 전송하는 예시입니다.

<form id="ajaxForm">
  <input type="text" id="username" placeholder="Enter your username">
  <button type="submit">Submit</button>
</form>

<script>
  $('#ajaxForm').on('submit', function(event) {
    event.preventDefault();  // 폼의 기본 제출 동작 방지
    
    var username = $('#username').val();
    
    $.ajax({
      url: '/submit',
      method: 'POST',
      data: { username: username },
      success: function(response) {
        alert('Form submitted successfully!');
      },
      error: function() {
        alert('Error submitting form!');
      }
    });
  });
</script>

 

위 예제에서 event.preventDefault()를 사용하여 폼이 서버에 전송되는 기본 동작을 막고, 대신 JavaScript의 $.ajax()를 통해 비동기적으로 데이터를 전송합니다. 이를 통해 페이지가 새로고침되지 않고도 데이터를 처리할 수 있습니다.

언제 사용해야 할까?

1. 폼 검증이 필요할 때: 사용자가 폼 데이터를 잘못 입력했을 경우, 서버로 폼이 전송되는 것을 막고 사용자가 오류를 수정할 수 있도록 할 때 유용합니다.
2. AJAX를 통한 비동기 통신을 사용할 때: 폼 제출이나 링크 클릭의 기본 동작을 막고, JavaScript를 통해 서버와 비동기적으로 데이터를 주고받고 싶을 때 사용합니다.
3. 커스텀 동작을 적용할 때: 기본 동작을 막고 다른 사용자 정의 기능을 적용하려는 경우에 사용합니다. 예를 들어, 페이지 새로고침 없이 UI만 업데이트하거나, 특정 조건이 충족될 때만 기본 동작을 허용할 수 있습니다.