티스토리 뷰

개발공부/JS

[JS] e.preventDefault() 란??

chihoya 2023. 6. 21. 16:53 
// 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 class="login-form">
      <input required maxlength="15" type="text" placeholder="what is your name?" />
      <input type="submit" value="Log In" />
    </form>
    <script src="app.js" />
  </body>
</html>
// JS 코드

const loginForm = document.querySelector(".login-form");
const loginInput = loginForm.querySelector("input");

function onLoginSubmit(e) {			 // e -> 첫번째 argument(매개변수)
  e.preventDefault();
  console.log(e);
  const username = loginInput.value;
  console.log(username);
}

loginForm.addEventListener("submit", onLoginSubmit);
loginForm.addEventListener("submit", onLoginSubmit);
-> submit 이벤트가 발생한다면 onLoginSubmit 함수를 실행시킨다는 의미
      JS는 onLoginSubmit 함수 호출시 인자를 담아서 호출함. 해당 인자는 event object를 담은 정보들
 
 

★ 중요 ★
form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다. << 우리가 원하는 것이 아님!
preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다!!

이 preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다.
첫 argument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.
JS는(기본적으로)argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다.
ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있음

* argument = 매개변수(파라미터)

 

또 중요한 점은 addEventListener 안에 있는 함수는 직접 실행하지 않는다는 것이다. 
즉, 내가 아래 코드에서 
loginForm.addEventListener("submit", onLoginSubmit);

onLoginSubmit() 이렇게 해주는 것이 아닌 브라우저가 자동으로 실행시켜 준다. 따라서 () 없다.
브라우저에서 해당 이벤트에 대한 정보 즉, object를 가지게 된다.
addEventListener의 함수에서 object에 대한 자리만 할당해주면 해당 이벤트가 발생시킨 정보들에 대한 object들을 볼 수 있다.

 

'개발공부 > JS' 카테고리의 다른 글

[JS] 현재시간 불러오기  (0) 2023.06.22
[JS] localstorage에 item 생성, 삭제, 조회  (0) 2023.06.21
[JS] classList의 toggle  (0) 2023.06.21
[JS] innerHTML vs innerText  (0) 2023.06.21
[JS] 함수에 console.log 대신 return 쓰는 이유?  (0) 2023.06.20
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함