[Vanilla JS] Form Submission & Events

  <form id="login-form">
    <input
      required
      maxlength="15"
      type="text"
      placeholder="What is your name?"
    />
    <input type="submit" value="Log In"> <!-- Btn -->
  </form>

 html 에서 지원하는 form 태그를 이용하여 JS 에서 따로 button 상호작용에 대한 함수를 추가하지 않아도 input 과 button 을 통해 얻는 value 를 저장할 수 있습니다.

 

 하지만 form 의 기본 동작은 submit event 가 발생할 경우 브라우저가 자동으로 초기화(새로고침) 되기 때문에 이와 같은 현상을 제어하기 위해서는 html 의 form 을 토대로 가져가되, JS 에서 함수를 추가하여 세부 옵션을 조정해야합니다.

 

---

 

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

function onLoginSubmit(event) {
  event.preventDefault(); // submit 시에 초기화되는 브라우저의 기본 동작을 막아줌
  console.log(loginInput.value); // input 에 어떤 value 가 들어왔는지 확인하는 용도
}

loginForm.addEventListener("submit", onLoginSubmit);

 preventDefault 함수는 기본 동작을 전부 막아주는 기능을 가지고 있습니다. 위 코드의 경우에는 input 을 통해 value 를 입력했을 때 브라우저가 초기화되는 form 태그의 기본 기능 전체를 제어하여 초기화되지 않도록 해주고 있습니다.

 

  <a href="https://detergentyoon.tistory.com/">Go to mildman's blog</a>

const link = document.querySelector("a");

function handleLinkClick(event) {
  event.preventDefault(); // 
  console.log(event); 
}

link.addEventListener("click", handleLinkClick);

 preventDefault 함수는 form 에만 국한되는 것이 아니라 모든 태그의 기본 기능을 제어할 수 있습니다.

가령 위 코드의 경우에는 a 태그의 기본 기능인 클릭했을 때 해당 사이트로 이동되는 이벤트를 막을 수 있습니다.

 

---

 

 함수에 addEventListener 를 적용하는 경우는 functionName() 형태처럼 함수를 직접 실행하는 것이 아니라, 브라우저를 통해 어떠한 이벤트가 발생했을 때에만 함수가 실행되도록 해야합니다.

 

 이를 위해서 위 예시 코드들과 같이 variable.addEventListener("condition", function); 의 형태로 작성합니다.