<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum App</title>
<link rel="stylesheet" href="Momentum.css">
</head>
<body>
<form id="login-form">
<input
required
maxlength="10"
type="text"
placeholder="What is your name?" />
<input type="submit" value="Log In" />
</form>
<a href="https://sm-portpolio.netlify.app">Go to sm-portpolio</a>
<script src="Momentum.js"></script>
</body>
</html>const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const linkButton = document.querySelector("a");
function onLoginSubmit(e) {
// console.dir(loginInput);
// console.log("click!!!!!");
// const username = loginInput.value;
e.preventDefault();
console.log(loginInput.value);
}
function clicklinkButton(e) {
console.log(e);
alert("clicked button!!!");
}
loginForm.addEventListener("submit", onLoginSubmit);
linkButton.addEventListener("click", clicklinkButton);
- a태그가 HTML에 추가 되었다.
- a태그는 click 이벤트를 감지한다.
- a태그가 클릭되면 alert을 띄우고 콘솔에 event 객체의 정보를 표시한다.
- alert창이 사라지면 해당 링크로 이동한다.
결과:
- 이전 포스팅에서는 submitEvent라고 출력되었다.
- 위 코드에서는 PointerEvent라고 출력된다.
- 많은 다른 이벤트가 있을것으로 예상된다.
Event object
- 내가 클릭한 위치의 x,y 좌표를 보여주고 있다.
- 유저가 어디를 클릭했는지 알아야 할 때가 있다. (중요한 정보)
- 이외에도 많은 정보를 담고있다
- console.dir()을 통해 자세하게 볼수 있다.
가장 중요한건 addEventListener 안에 있는 함수는 직접 실행하지 않는다는 것이다.
브라우저가 해주는 것!
브라우저는 실행만 시켜주는게 아니라 event에 대한 정보도 담아준다.
우리는 그 정보가 들어갈 자리(함수의 매개변수)만 만들어주면 된다.
이 정보안에는 몇 가지 함수도 같이 들어있다.(preventDefault()도 이 중 하나다.)
프론트엔드 개발자 지망생