HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form id="login-form">
<input required maxlength="15" type="text" placeholder="What is your name?" />
<input type="submit" value="Log In">
</form>
<script src="app.js"></script>
</body>
</html>JS
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function onLoginSubmit(event){
event.preventDefault(); //브라우저가 기본동작을 실행하지 못하게 막음
console.log(loginInput.value);
}
loginForm.addEventListener("submit", onLoginSubmit);-
event.preventDefault();
- 브라우저가 기본 동작을 실행하지 못하게 막기
- event object는preventDefault함수를 기본적으로 갖고 있음 -
loginForm.addEventListener("submit", onLoginSubmit);
- submit 이벤트가 발생한다면,onLoginSubmit함수를 실행 시킨다는 의미
- JS는onLoginSubmit함수 호출 시 인자를 담아서 호출함.
- 해당 인자는 event object를 담은 정보들 -
form을 submit(전송)하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다.
preventDefault()함수를 추가함으로써 브라우저의 기본동작을 막을 수 있다. -
preventDefault함수는EventListener함수의 ‘첫번째 argument’안에 있는 함수이다. 첫 argument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다. -
JS는 (기본적으로)argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다.
-
ex) 누가 submit주체인지, 몇시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있음
-
form의 기본동작은 submit
브라우저 기본동작 막기
-
form의 기본동작은 submit, a의 기본동작은 링크이동 등등 각 기본동작들이 있음
-
addEventListener안에 있는 함수는 직접 실행하지 않는다. 브라우저가 실행시켜주고 브라우저에서 해당 이벤트에 대한 정보 즉, object를 가지게된다. -
addEventListener의 함수에서 object에 대한 자리만 할당해주면 해당 이벤트가 발생시킨 정보들에 대한 object들을 볼 수 있다. -
이때 해당 이벤트가 가진 기본Default값을 발생시키지 않게 하기 위해선
preventDefault를 이용하여 막을 수 있다.
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const link = document.querySelector("a");
function onLoginSubmit(event){
event.preventDefault(); //브라우저가 기본동작을 실행하지 못하게 막음
// const username = loginInput.value;
console.log(loginInput.value);
}
function handleLinkClick(event){
event.preventDefault(); //a태그 클릭하여도 링크이동 안됨
console.dir(event);
alert("clicked!");
}
loginForm.addEventListener("submit", onLoginSubmit);
link.addEventListener("click", handleLinkClick);이 글은 패스트캠퍼스 노마드코더 '바닐라 JS로 크롬 앱 만들기'을 수강하며 정리한 노트입니다.
https://nomadcoders.co/javascript-for-beginners/lobby
