submit이벤트는 form이 서버로 전송될때 발생하는 이벤트로서 form을 전송하는 방법을 알아보자.
- < input type="submit" >이나 < input type="image" > 클릭하기
- 텍스트입력 요소노드에서 Enter키 누르기
- < button > 클릭하기 (버튼은 기본으로 submit)
<body>
<form>
1. input 필드에 포커스를 준 다음 Enter 키 누르기: <input type="text" value="text"><br>
2. '제출' 버튼 누르기: <input name="user" type="submit" value="제출">
</form>
let f = document.forms[0];
f.addEventListener('submit',(event)=>{
console.log(event.target, event.currentTarget);
event.preventDefault();
});
f.elements.user.addEventListener('click',()=>console.log(111)); input요소노드에서 엔터키입력했을때 submit이벤트가 발생한다고 했다.
위와 같이 input요소노드에서 엔터키입력했을때 제출버튼의 클릭이벤트가 발생한다. 이러한 행동은 분명 이상한 것이지만 그렇다.
자바스크립트 submit메서드
form.submit()을 호출하면 자바스크립트로 직접 폼을 서버에 전송할 수 있다.
form.submit();메서드는 submit이벤트를 발생시키지 않음을 유의하자.
form.submit()을 호출했다면 스크립트에서 이미 필요한 모든 조치를 했다고 가정하기 때문이다.
let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';
form.innerHTML = '<input name="q" value="테스트">';
// 폼을 제출하려면 반드시 폼이 문서 안에 있어야 합니다.
document.body.append(form);
form.submit();