브라우저의 기본 기능
우리는 사용자의 정보를 모으기 위해 input 과 button 을 활용할 수 있다. 하지만 이런 방식은 js의 도움을 필요로 한다.
js 대신 브라우저의 도움을 받기 위해 html 의 form 태그을 사용할 수 있다. form 과 input 및 input type 을 활용하면 자동으로 유효성 검사를 할 뿐만 아니라 submit 도 한번에 할 수 있다.
여기에도 문제점이 있다. submit을 할 때마다 브라우저가 새로고침이 된다는 것이다. 어떻게 막을 수 있을까?
해당 코드는 다음과 같다. addEventListener 를 통해 제출 버튼을 누르면 내용을 제출하면서 자동으로 새로고침되는 것을 봤다.
const logInForm = document.querySelector("#login-form");
const logInInput = logInForm.querySelector("input");
function onLogInSubmit() {
const username = logInInput.value;
console.log("hello", username);
}
logInForm.addEventListener("submit", onLogInSubmit);새로고침을 방지하는 방법
자동 새로고침되는 것을 막기 위해서, 함수에 매개 변수를 받고 preventDefault 를 사용할 수 있다.
const logInForm = document.querySelector("#login-form");
const logInInput = logInForm.querySelector("input");
function onLogInSubmit(event) {
event.preventDefault();
console.log(event);
}
logInForm.addEventListener("submit", onLogInSubmit);예를 들자면 다음과 같다. 함수에 event 라는 매개 변수를 만들어주었다. 사실 없어도 무관하지만, 브라우저의 기본 기능을 막기 위해 만든 것이다. 그렇다면 도대체 매개변수로 어떤 값들이 넘어오는 것일까?
다시 말해 onLogInSubmit(); 을 호출했을 때, ( ) 안에는 무슨 내용이 넘어오는 것일까? 이를 확인하기 위해 event 매개변수를 console.log 로 찍어봤다.
다음과 같은 여러 값들이 매개 변수로 넘어오고 있다. 이 정보들은 방금 발생한 이벤트에 대한 정보다. 예를 들면 어느 위치에서 눌렀는지, 언제 눌렀는지 등에 대한 정보이다.
기억할 것
브라우저가 기본적으로 제공하는 기능들이 있다. addEventLisener 의 함수를 실행하는 주체는 사용자가 아니라 브라우저이다. 브라우저는 기본적으로 제공하는 기능을 통해 함수를 실행한다.
우리는 preventDefault() 를 통해 함수 실행을 막고, 브라우저가 매개변수로 넘겨주는 정보를 통해 함수를 활용할 수 있다.
