10. [Javascript] 이벤트 기본 동작 막기 (with preventDefault)

preventDefault()

• preventDefault는 이벤트의 기본 동작을 취소하는 메서드입니다. 
• 이벤트가 발생했을 때 기본 동작을 수행하지 않도록 막는 데 사용됩니다.
• 일반적으로, 웹 페이지에서 발생하는 이벤트(예: 링크 클릭, 폼 제출 등)는 기본 동작이 정의되어 있습니다. 
• preventDefault 메서드는 이벤트 객체의 메서드로 호출됩니다.
• 일반적으로 이벤트 핸들러 함수 내에서 사용됩니다. 

<form id="myForm">
  <input type="text" name="username" placeholder="사용자 이름" />
  <input type="password" name="password" placeholder="비밀번호" />
  <button type="submit">로그인</button>
</form>

<script>
  // submit 이벤트 핸들러
  function handleSubmit(event) {
    event.preventDefault(); // 기본 동작 중지

    // 폼 데이터 수집
    var formData = new FormData(event.target);
    var username = formData.get('username');
    var password = formData.get('password');

    // 폼 데이터 처리 또는 추가 동작 수행
    console.log('사용자 이름:', username);
    console.log('비밀번호:', password);
    // ... 추가 동작 수행
  }

  // 폼 요소 선택
  var form = document.getElementById('myForm');

  // submit 이벤트에 핸들러 등록
  form.addEventListener('submit', handleSubmit);
</script>

위의 예시에서 handleSubmit 함수는 submit 이벤트를 처리하는 핸들러입니다. 

event.preventDefault()를 호출하여 기본 동작인 폼 데이터의 서버 전송과 페이지 새로고침을 중지시킵니다. 

그 후, 폼 데이터를 수집하고 처리하는 등의 추가 동작을 수행할 수 있습니다. 

이를 위해 FormData 객체를 사용하여 폼 데이터를 수집하였고, 이후 폼 데이터를 활용하여 원하는 작업을 수행할 수 있습니다.

이와 같이 submit 이벤트를 처리하고 event.preventDefault()를 사용하면 폼의 기본 동작을 중지시킬 수 있으며, 원하는 동작을 자유롭게 구현할 수 있습니다.

 

 

- 참고링크: https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault

Event.preventDefault() - Web API | MDN