[로그인3]브라우저의 기본동작 막기

지난 시간에 이어서!

loginButton은 삭제하고 login-form 그 자체를 이용하도록 합니다.

클릭이 아닌 submit 감지하도록 코드를 작성해보겠습니다.

이제 form의 submit event를 감지하고 있는데, submit은 엔터를 누르거나 버튼을 클릭할 때 발생한다는 사실을 기억하도록 합시다!

결과를 보면 입력한 값이 콘솔창에 잠깐 떴다가 사라지는 것을 확인해볼 수 있습니다.
이것은 우리가 목표한 것의 50%를 완료한 것입니다!

미션1은 form을 submit할 때 입력값을 받아내는 것입니다.

하지만 아직 새로고침을 못 막고 있습니다.

여기서 새로고침이 일어나는 건 form submit 기본 동작입니다.

브라우저가 그러도록 프로그래밍이 되어있습니다.

우리가 해야할 일은 이 기본 동작이 발생하지 않도록 하는 것입니다.

( ) 이것들을 더하면 브라우저가 보자마자 자동으로 이 function을 실행시켜버리게 됩니다.
하지만 addEventListener를 활용할 때는 function의 이름만 적어주고, 그럼 지정한 이벤트가 발생했을 때만 브라우저가 해당 function을 실행시키게 되는 것입니다.
그러니까 코드처럼 쓸 필요는 없습니다!


브라우저가 정확히는 onLoginSubmit()을 하고 있는 것은 아닙니다.
브라우저는 우선 onLoginSubmit function을 호출하고, 브라우저가 function을 실행하긴 하지만 () 여기 안에서 우리에게 정보를 주고 있는 것입니다.
브라우저는 브라우저 내에서 event로부터 정보를 잡아내서 onLoginSubmit function 실행 버튼을 누르고 있는 것입니다.

신기한 코드를 작성하여 보면 onLoginSubmit function에 대한 argument을 받고 보여주는 것을 확인해볼 수 있습니다.

즉, 누군가 form을 submit하면 JS가 이 function을 호출하도록 하고 있는 것입니다.

여기서 JavaScript가 하게 될 일은 onLoginSubmit 함수의 첫번째 argument로 발생한 일에 대해 네가 필요로 할만한 정보를 주는 것입니다.

preventDefault는 어떤 event의 기본 행동이든지 발생되지 않도록 막는 것입니다.

이렇게 해주면 새로고침이 되지 않는다는 것을 확인해볼 수 있습니다!