JS FORM tag의 정보

HTML

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

JS

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

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

loginForm.addEventListener("submit", onLoginFormSubmit);

a.preventDefault();
form테그의 submit을 방지하기 위함. 자동 submit을 방지하지 않으면, 개발자 도구의 console창이 reload되기때문에 정보가 깜빡 하고 사라짐. 따라서 기본 디폴트로 지정된 submit을 방지(prevent)하면, 인자(argument)event의 정보를 볼 수 있다.

개발자 도구 console 출력결과

SubmitEvent 
isTrusted: true
bubbles: true
cancelBubble: false
cancelable: true
composed: false
currentTarget: null
defaultPrevented: true    << 여기!! 개발자도구에서 확인 할 수 있는 부분
eventPhase: 0
returnValue: false
srcElement: form#login-form
submitter: null
target: form#login-form
timeStamp: 1741.5
type: "submit"
[[Prototype]]: SubmitEvent