submit 함수

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

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

loginForm.addEventListener("submit",onLoginSubmit)

• 폼안에 있는 값은 버튼을 누르면 전송된다, 그래서 이번엔 click 이벤트가 아니라 submit이벤트가 되도록 수정했다
• 함수안에 tomato라는 매개변수를 주고 그것이 어떤값을 가지고 있는지 콘솔로그로 확인했다.

  SubmitEvent {isTrusted: true, submitter: button, type: 'submit', target: form, currentTarget: div#login-form, …}
  isTrusted: true
  bubbles: true
  cancelBubble: false
  cancelable: true
  composed: false
  currentTarget: null
  defaultPrevented: true
  eventPhase: 0
  path: (6) [form, div#login-form, body, html, document, Window]
  returnValue: false
  srcElement: form
  submitter: button
  target: form
  timeStamp: 8877.20000000298
  type: "submit"
  [[Prototype]]: SubmitEvent

  이 매개변수는 submit이벤트 자체를 가지고 있다는걸 알수있다.
  • 자바스크립드에서는 기본적으로 첫번째 매게변수를 실행된 event값으로 인식한다.

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

    • 따라서 이벤트의 매게변수는 event라고 써주는것이 보통이다,.
    • 하지만 반드시 첫번째 매개변수가 event인것은 아니다, 사용자가 입력한 값을 받아오는것도 가능하다, 따로 정하지 않았을때 event가 된다
• .preventDefault(); 는 submit이벤트 시에도 화면이 리로드 되지 않게 하기 위한 코드이다
  • preventDefault는 기본적으로 웹브라우저가 기본적으로 실행시 행동하는것을 하지 않게 해준다