index.html
<body>
<form id="login-form">
<input type="text" placeholder="What is your name?" />
<input type="submit" value="Log In" />
</form>
<script src="app.js"></script>
</body>
app.js
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit() {
const username = loginInput.value;
console.log(username);
}
loginForm.addEventListener("submit", onLoginSubmit);
브라우저의 기본 동작 막기
1. form submit의 기본동작은 "새로고침"
app.js
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit(event) { // (2)
event.preventDefault(); // (3)
console.log(loginInput.value);
}
loginForm.addEventListener("submit", onLoginSubmit); // (1)
-> 아무것도 하지 않음으로써, JS가 어떤 정보를 담은 채로 function을 호출함.
-> (1) submit event가 발생할 때 JS는 onLoginSubmit function을 호출
-> (2) onLoginSubmit function은 event object를 argument 로 주고 있음
-> (3) 기본 동작이 실행되는 것을 막아줌
