4.2 Events

이제 form이 submit 이벤트를 감지하도록 js 코드를 수정해보자

loginForm 변수를 만들어 그에 맞게 코드를 작성하고 이를 실행 해 보면, 이름을 입력하고 login 버튼을 눌렀을 때 consol창에 이름이 출력됐다가 다시 사라지는 것을 확인할 수 있다.

이름이 잠시 출력됐다가 바로 사라진 모습

그렇지만 우리는 form을 submit 할 때 입력값을 받아내는 것을 해냈다.

이제 login 버튼을 눌렀을 때 새로고침을 하지 않도록 막는 것만 해결하면 된다.

 

브라우저가 우리에게 어떤 정보를 주고있는지 알기위해 코드를 추가한 다음 출력해보도록 하자

하나의 argument인 event를 받도록 하고 그걸 JS에 넘겨주는 함수 

새로고침 후 실행해보면 아까처럼 consol 창에 무언가 출력되는걸 확인할 수 있는데 이는 onLoginSubmit function에 대한 argument(event)로 얻어온 정보이다.

onLoginSubmit function에 대한 argument(event)로 얻어온 정보

즉, 모든 EventListener function의 첫 번째 argument는 항상 지금 막 벌어진 일들에 대한 정보가 된다.

그리고 preventDefault() 함수의 역할은 어떤 event의 기본 행동들이 발생하지 않도록 막는 것이고, 이때 기본 행동은 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작이다.

누군가 form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하는데, preventDefault() 함수를 사용하여 그것을 막은 것이다.