TIL 230531

-문제
영화 소개 페이지를 제작중에 있다.
form 태그 안에 있는 input에 영화 이름을 입력하고
검색을 하면 해당 영화가 나와야하는데 "enter"키를 누르면 자꾸 새로고침이 되어서 노출이 되지 않는 상황이.

-원인
form 태그 내부에 button이 존재할 경우 reload현상이 발생한다.
form 태그 내부의 button은 기본적으로 type:submit을 갖기때문에 이벤트를 막아줄 방법이 필요했다.
(기본적으로 브라우저는 이벤트 발생시 최상위까지 이벤트를 실행한다.->이벤트 버블링)

-시도
1.event.preventDefault() : 브라우저의 기본 동작 제어

2.form 내부 button의 type을 button으로 바꿔주기
-> 단순히 type만 바꿔서는 submit 요소가 존재하기에 reload 현상 지속됐다.

2.form 태그 내부의 무의미한 input을 생성하기 :
-> input 생성으로도 해결되지 않았다.

3.onsubmit 이벤트를 사용해 form태그 내부의 submit들이 작동 하지 않도록 막아주기.
(onsubmit?:form 태그 안에서
form전송을 하기 전에 입력된 데이터의 유효성을 체크하기 위해 사용하는 이벤트.)

-해결
form 태그 내부에 onsubmit을 입력해서 멈춰주기.

onsubmit="return false;"