• submit 은 서버의 폼 핸들러(form handler)로 폼 데이터(form date)를 전송하는 제출 버튼(submit button)을 정의합니다.
  • 폼 핸들러는 일반적으로 입력된 데이터를 처리하는 스크립트를 포함하고 있는 서버 페이지이며, 이러한 폼 핸들러의 주소는 <form> 요소의 action 속성에 명시됩니다.
  • 폼 태그의 서버로 전송을 하기 위한 기본 이벤트 지정

    • 태그 안의 submit

      <input type="submit" />

      <button type="submit"></button>

      → submit 이라 지정하지 않아도 button은 기본적으로 submit 이다.

    • 스크립트 submit

      document.querySelector('폼-id').addEventListener('submit', callback);

      ⚠️ addEventListener의 submit 이벤트를 지정할 때

      1. 버블링을 이용한 상위 태그에 지정하거나

      document.querySelector('폼 상위(부모)태그-id')

      2. 해당 form 태그 요소에 이벤트를 지정한다.

      document.querySelector('폼-id')

      이유 : 이벤트 핸들러의 submit 이 발생하면 클릭한 버튼이 아닌 form 태그가 실행되기 때문이다. ★★★

      ⚠️ 버튼에 submit 이벤트 지정 X

      버튼에 지정하여도 submit은 form태그에 대한 이벤트로 발생

      버튼에 지정해야 한다면 click 이벤트로 변경

      document.querySelector('버튼-id').addEventListener('submit', callback);(X)

      document.querySelector('버튼-id').addEventListener('click', callback); (O)

      ⚠️ submit으로 인한 새로고침을 막는 방법

      submit이후 양식을 제출하면 새로고침이 발생하는데, 새로고침이 발생하는 이유는 form 태그의 submit 액션이 수행되었기 때문이다.

      (헷갈리는 점은 button의 submit이 있다고 해도 form이 없고, form 태그 안에 버튼이 위치하지 않으면 양식이 제출되지 않는다. 즉 새로고침이 발생하지 않음)

      새로고침을 막기위해서는 이벤트 핸들러 함수 submit 에 preventDefault() 함수를 호출해주면 된다.

      (버튼에 이벤트 핸들러 함수를 적용하면 안된다. form 요소에 이벤트 핸들러 함수를 적용해야 동작한다.)