form - input 상관관계, event 막기

input은 기본적으로  form 태그 안에 있어야 한다.

form 안에 있어야 input의 유효성 검사가 작동되고, form 안에 있어야 button을 누르거나 type이 submit인 input을 눌렀을 때 그 form 이 submit 된다.

form이 제출되면 자동으로 페이지가 새로고침된다.

 

그런데 필요한 것은 페이지를 새로고침하는 것이 아니고, input에 입력된 value를 저장하는 것.

input으로 들어온 value를 저장한다고 해도 새로고침이 되어버리면 사라진다.

 

그러기 위해서는 submit이라는 이벤트가 발생하는 것을 아예 막아버리거나

중간에 개입해서 submit이 일어났다는 것을 알아내야함.

(submit은 엔터를 누르거나, 버튼을 클릭할 때 발생한다)

 

const loginForm = document.querySelector('#login-form');
//폼을 선언하고
const loginInput = document.querySelector('#login-form input');
// 폼 안의 인풋을 선언한다

 

 

function onLoginSubmit(e) {
    e.preventDefault();
    // 함수의 파라미터로는 e를 받아오고, 이것의 기본적인 이벤트를 막는다
    const username = loginInput.value;
    // 변수 username을 선언하고 유저가 인풋창에 입력하는 value값을 넣는다
    console.log(username);
}

 

 

loginForm.addEventListener("submit",onLoginSubmit)
// 아까 선언했던 폼에 submit 이벤트가 실행되면
// 기본 이벤트를 막고 value값을 받아오는 함수 = onLoginSubmit을 실행시킨다