onsubmit & addEventListener

onsubmit

HTML 폼 요소에서 발생하는 이벤트 헨들러, 사용자가 폼을 제출할 때 실행되는 자바스크립트 코드를 지정하는데 사용. 폼 제출 시 서버로 데이터를 정송하기 전에 추가 작업을 하거나 기본적 폼 제출 동작을 방지하고자 할때 사용

form 태그에서 입력받은 값은 onsubmit으로 넘겨줄 수 있음.
이는 form 태그에서만 사용 가능 form 태그 밖에서는 사용 불가능
form태그 안에 있는 input 박스에서 엔터를 누르거나 클릭으로 전송을 하면 form 내용이 전송되며 자동으로 새로고침이 된다.

1. 자바스크립트로 폼 유효성 검사 폼이 제출되기 전에 자바스크립트로 입력된 데이터가 올바른지 확인할 수 있다.
2. 폼 제출 방지 event.preventDefault()를 사용해 기본 폼 제출 동작(페이지 새로고침 및 서버로의 데이터 전송)을 막을 수 있습니다.

addEventListener는 DOM 요소에 이벤트 리스너를 추가하는 메서드, 다양한 이벤트가 발생할 때 특정 동작을 수행 -> onclick이나 onsubmit등 이벤트 속성을 사용하지 않고도 자바스크립트에서 이벤트 처리 가능

<!-- 수정할 부분: 잘못된 부분을 가정 -->
<form id="contactForm">
    <!-- 추가로 onsubmit을 직접 호출하려고 했던 경우 -->
    <form id="contactForm" onsubmit="submitMessage(event)"> -->  
    <!-- 폼 요소들 -->
</form>

해결방법

• 호출 함수에 매개변수를 추가해주고, event.preventDefault()를 사용해준다.

• 해당 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다.

HTML에서 직접 처리하려고 했기 때문에 onsubmit이 적용이 되지 않았지 않았을까? 한다.
Javascript로 event.preventDefault() ,addEventListener을 사용해 폼의 submit 이벤트 처리