티스토리 뷰
form태그 와 Submit
form 태그 안의
input type='submit'태그나 button 태그가 클릭되거나
enter값이 입력되면 결과적으로 submit 이벤트가 발생한다.
form 태그의 submit이벤트는 기본적으로 페이지가 매번 새로고침기능을 동반한다.
새로고침을 방지하기 위해서 preventDafault 함수를 사용하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum App</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 class="btn" type="submit" value="Input Log In" />
<button >Btn Log In</button>
</form>
<div id="logs"></div>
<script>
const loginForm = document.querySelector('#login-form');
const loginInput = document.querySelector('#login-form input');
const logs = document.querySelector('#logs');
function onLoginSubmit(e) {
e.preventDefault();
let username = loginInput.value;
logs.append(username, document.createElement('br'));
loginInput.value = '';
loginInput.focus();
}
loginForm.addEventListener('submit', onLoginSubmit);
</script>
</body>
</html>아래는 코드 실행 결과
매개변수 Event (중요!!)
★ 중요 ★
form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다. << 우리가 원하는 것이 아님!
preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다!!
이 preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다.
첫 arument(e)는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.
JS는(기본적으로)argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다.
ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있음
function onLoginSubmit(e) { // 2번 순서: 매개변수 e(event object)전달
e.preventDefault(); // 3번 순서: form의 submit 되었을때 새로고침을 취소
console.log(e); // 4번 순서: 이벤트인 e 출력
}
loginForm.addEventListener('submit', onLoginSubmit); // 1번 순서: submit이벤트 발생
// ↑↑↑↑↑
// JS는 onLoginSubmit함수 호출시 인자(e)를 담아서 호출함. 해당 인자는 event object를 담은 정보들
'WEB > JavaScript' 카테고리의 다른 글
| [크롬 앱 만들기]#5 CLOCK | PadStart, 생성자 함수 (0) | 2022.01.17 |
|---|---|
| [크롬 앱 만들기]#4.6 Loading Username | localStorage (0) | 2022.01.17 |
| [크롬 앱 만들기] #3.8 css in js | toggle function (0) | 2022.01.16 |
| [크롬 앱 만들기] #3.6 css in js | getter setter (0) | 2022.01.16 |
| [제로초JS] chap8 반응속도테스트 (0) | 2022.01.14 |
댓글