December 6, 2021

submit 이벤트는 폼을 제출할 때 트리거 되는데, 주로 폼을 서버로 전송하기 전에 내용을 검증하거나 폼 전송을 취소할 때 사용합니다.

한편, form.submit() 메서드는 자바스크립트만으로 폼 전송을 하고자 할 때 사용합니다. submit()메서드는 동적으로 폼을 생성하고 서버에 보내고자 할 때 사용합니다.

개괄적인 설명은 여기서 마치고 이제 submit 이벤트와 메서드에 대해 자세히 살펴봅시다.

submit 이벤트

폼을 전송하는 방법은 크게 두 가지가 있습니다.

1. <input type="submit">이나 <input type="image"> 클릭하기

2. 인풋 필드에서  키 누르기

   Enter

두 방법 모두 폼의 submit 이벤트를 트리거합니다. 이벤트 핸들러에선 데이터를 체크하는데, 데이터에 에러가 있는 경우 에러를 출력한 다음 event.preventDefault()를 호출하곤 합니다. 이렇게 되면 폼은 서버에 전송되지 않습니다.

아래 폼에서 두 동작을 각각 수행해 보세요.

1. 텍스트 필드로 이동해  키를 누릅니다.

   Enter

2. <input type="submit">을 클릭합니다.

참고로 두 동작 모두 alert 창을 보여주는데, return false 때문에 폼은 전송되지 않습니다.