#4.2 submit을 preventDefault()하기 (Events/바닐라 JS로 크롬 앱 만들기)

form 태그로 감싼 input과 button으로 엔터키를 누르거나 버튼을 누르면
사용자가 입력한 값은 자동으로 submit되며 브라우저는 새로고침된다.

  <form id="login-form">
    <input 
      required 
      maxlength="15" 
      type="text" 
      placeholder="What is your name?">
    <button>Log In</button>
  </form>

그래서 이제 click 이벤트는 중요하지 않게 되었다.

이제 확인해야할 것은 submit 이벤트이다.

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

function onLoginSubmit() {}

loginForm.addEventListener("submit", onLoginSubmit);

form 태그 자체를 loginForm으로 선언하고 이벤트리스너를 붙여
submit 이벤트를 감지하게 한 뒤, onLoginSubmit 함수를 호출하게 한다.

브라우저는 함수를 그냥 실행하는 것이 아니라
브라우저 내부의 정보를 가지고서 onLoginSubmit 함수를 실행하는데
onLoginSubmit 함수에 매개변수를 넣어보면 확인할 수 있다.

function onLoginSubmit(event) {
  console.log(event);
}

그런데 form을 submit하면 브라우저는 새로고침하는 것이 디폴트이기 때문에
콘솔에서느 브라우저가 가진 정보가 뜨고나서 아주 빠른 순간 사라진다.

그래서 이 것을 막기 위해 .preventDefault()함수를 사용한다.

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

function onLoginSubmit(event) {
  event.preventDefault();
  console.log(event);
}

loginForm.addEventListener("submit", onLoginSubmit);

이를 통해 브라우저가 함수를 실행하며 잡아낸 정보,
timeStamp나 type, submitter, path, target등을 콘솔에서 확인 할 수 있게 되었다.