230424/ 스터디 22일차 회고: form의 submit 이벤트

 

 

 

들어가기 앞서: 최근 블로그 포스팅이 뜸해진 이유

 

그 이유는 노션에 중독되었기 때문입니다.!

노션에 독후감도 쓰고, TIL도 쓰고, 강의 내용도 정리하고 있습니다.

가장 최근에 작성한 독후감:

프로그래머의 뇌 독후감 (notion.so)

 

하지만 블로그에 다시 돌아왔습니다. 노션은 나 혼자 보거나,

협업을 위한 위키를 만드는 장소이고

블로그의 뿌듯한 요소들을 충족시켜 줄 수 없으니까요.

 

벌써 10주 스터디의 전반부가 지나가고있습니다.

모여서 책도읽고, 함께 코드를 읽기도하고 보람찬 시간을 보내고 있습니다.

 

 

TIL

 

 

 

Form에 발생하는 submit 이벤트의 기본동작은 웹페이지 이동이다.

그리고 event.preventDefault()로 방지할 수 있다.

 

 

form 태그는 클라이언트와 서버가 소통하기위한 도구입니다.

클라이언트에게 값을 입력받아 서버에게 전송할 수 있죠.

 

<form>
    <input type="text"/>
</form>

form내부의  input이나 button등을 통해 submit이벤트를 발생시킬 수 있습니다.

submit이벤트는 기본적으로 페이지 이동을 포함합니다.

 

웹페이지에서 로그인하기를 눌러 로그인페이지로 이동한다던가,

ID와 PASSWORD를 입력하여 개인 페이지로 이동한다던가 하는것이

모두해당 이벤트에의해 발생하는 동작입니다.

 

 

만일 이동할 페이지가 없다면 새로고침이 수행됩니다.

 

 값만 입력받고 페이지의 새로고침은 방지하고싶다면
이벤트 리스너의 비동기함수 첫줄에 event.preventDefault()코드를 추가해야합니다.

 

myForm.addEventListener("submit", (event)=>{
	event.preventDefault();
    //이하 동작 내용
    })

 

 

읽어주셔서 감사합니다.

오탈자나 에러가있다면 댓글로 알려주세요!