[JS] preventSubmit : 기본 동작 막는 방법

자바 스크립트에서 input 태그는 굉장히 자주 쓰인다.

그만큼 Input을 JS로 잘 다루는 방법들을 습득시키는게 중요하다고 한다.

 

특히 브라우저 기본 동작으로 input이나 button은 기본적으로 submit 즉, 전송시키는 동작이 있다. 

이 동작은 동시에 페이지를 새로고침하는 기능을 갖고 있다. 

하지만 대다수의 작업중에는 새로고침을 하지 않고 그대로 value값을 가지고 있음을 의도하는 경우가 많다. 

 

그렇다면 이 default값으로 새로고침을 해버리는 이 동작을 어떻게 하면 막을 수 있을까?

 

 

정답은 Event.preventDefault() 메서드를 사용하기! (MDN 참고)

메서드에 적혀있는 그대로 Default값을 Prevent해주는 메서드이다. 

cancelable : true (취소해도 되는 이벤트)의 경우에는 이 메서드를 호출하면 

기본 동작일지라도 실행하지 않게 해준다. 

 

그렇다면 이 기능을 Input이나 button 리스너에 'submit' 이벤트가 작동했을 때 호출되는 함수안에 메서드를 넣어준다면?

이벤트리스너에 있는 함수 onLoginSubmit안에 preventDefault () 메서드를 설정해보았다?

 

 

결과는 완벽하다 

event.preventDefault () 메서드를 넣기전에는 엔터나 버튼을 누르면 submit과 동시에 디폴트값인 새로고침이 이루어졌다면,

메서드를 넣어준 후에는 submit 기능은 정상적으로 작동하지만, 새로고침 기능을 막아줌으로써 값들이 연속적으로 입력되고 남아있는 것을

볼 수 있다.