<!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">
<link rel="stylesheet" href="style.css">
<title>Momentum app</title>
</head>
<body>
<form id="login-form">
<input required maxlength="15" type="text" placeholder="What is your name?">
<button>Log In</button>
</form>
<script src="app.js"></script>
</body>
</html>
const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input")
function onLoginBtnSubmit(tomato){
tomato.preventDefault();
console.log(tomato)
}
loginForm.addEventListener("submit",onLoginBtnSubmit)
preventDefault
기본적으로 form을 사용해서 submit을 하는 경우 페이지 전체가 새로고침 된다
그래서 그것을 막기 위한 function이다
모든 EventListener function의 첫번째 argument는 항상 지금 벌어진 정보를 제공한다
SubmitEvent {isTrusted: true, submitter: button, type: 'submit', target: form#login-form, currentTarget: form#login-form, …}
isTrusted: true
bubbles: true
cancelBubble: false
cancelable: true
composed: false
currentTarget: null
defaultPrevented: true
eventPhase: 0
path: (5) [form#login-form, body, html, document, Window]
returnValue: false
srcElement: form#login-form
submitter: button
target: form#login-form
timeStamp: 1685.6000000238419
type: "submit"
[[Prototype]]: SubmitEventconsole로 출력한 정보
중요한 것은 방금 일어난 Event의 대한 정보라는 것
submitter는 Button으로 부터이고 target은 form
timeStamp는 언제 submit 되었는가
이 정보를 가지고 event의 관한것을 알 수 있다
const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input")
function onLoginBtnSubmit(event){
event.preventDefault()
console.log(event)
}
loginForm.addEventListener("submit",onLoginBtnSubmit)
위에는 tomato로 첫번째 argument를 받았지만 event로 받는 것이 관행이다
preventDefault를 정리하자면 브라우저의 기본기능을 stop 하는 것이다
const loginForm = document.querySelector("#login-form")
const loginInput = document.querySelector("#login-form input")
const h1 = document.querySelector("h1")
function onLoginBtnSubmit(event) {
event.preventDefault()
const username = loginInput.value
loginForm.classList.add("hidden")
h1.classList.remove("hidden")
console.log(username)
}
function handleLinkClick(event) {
event.preventDefault()
}
loginForm.addEventListener("submit", onLoginBtnSubmit)
element.classList.add("className")
element.classList.remove("className")
element의 className을 추가하거나 제거해줄 수 있는 기능
const HIDDEN_CLASSNAME = "hidden"일반적으로 string만 포함된 변수는 대문자로 표기하고 string을 저장하고 싶을 때 사용 (관습)
h1.innerText = "Hello " + username
h1.innerText = `Hello ${username}`위 두 개는 같다
"" '' 이 아닌 `` 이다
변수는 ${variable} 로 사용한
'Study > JS' 카테고리의 다른 글
| 바닐라 JS로 크롬 앱 만들기 (2022/01/06) by 노마드 코더 (4) (0) | 2022.01.06 |
|---|---|
| 바닐라 JS로 크롬 앱 만들기 (2022/01/05) by 노마드 코더 (3) (0) | 2022.01.05 |
| 바닐라 JS로 크롬 앱 만들기 (2022/01/03) by 노마드 코더 (2) (0) | 2022.01.03 |
| 바닐라 JS로 크롬 앱 만들기 (2022/01/02) by 노마드 코더 (0) | 2022.01.02 |