TIL - event.preventDefault()

event.preventDefault() 을 살펴보기 전에 먼저 form 태그에 대해 먼저 공부해보자.

✅ form

form 태그는 입력 양식이다.
회원가입, 로그인 등에 이용되는데, 폼은 입력된 데이터를 한 번에 서버로 전송하는 기능을 한다.

• 폼 태그 속성

  • aciton : 폼 데이터를 서버로 보낼 때 데이터가 도착할 URL 명시.
  • name : 해당 폼의 이름을 명시.
  • accept-charset : 폼 데이터를 서버로 보낼 때 사용되는 문자 인코딩 방식.
  • target : 응답이 열릴 위치를 명시한다.
    
  • method : 서버로 제출될때 사용되는 HTTP를 명시한다.
    <출처> http://tcpschool.com/bbs/content.php?co_id=legalview

var input = document.getElementById('input');
var form = document.getElementById('form');
var answer = document.getElementById('answer');

form.addEventListener('submit', function(e) {
     var input_value = input.value;
     answer.innerText = input_value;
})

form을 사용해보기 위해 간단히 구현하였는데, 실행은 문제없이 되지만, 창이 새로고침 되어버리는 현상이 발생한다.

이때 사용하는 것이 event.preventDefault() 메서드이다.

어떤 이벤트에 대한 기본 동작을 실행하지 않도록 지정하는 기능을 한다.
ex) a태그, input태그

var input = document.getElementById('input');
var form = document.getElementById('form');
var answer = document.getElementById('answer');

form.addEventListener('submit', function(e) {
     var input_value = input.value;
     answer.innerText = input_value;
      e.preventDefault();	// 이벤트 작동 X
})

데이터 전달은 정상적으로 작동하지만, 새로고침만 되지않는 것을 확인할 수 있다.