[노마드코더] Events

event.PreventDefault()

HTML

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

 

JS

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

function onLoginSubmit(event) {
    event.preventDefault();
    console.log(event);
}

loginForm.addEventListener("submit", onLoginSubmit);

 

Result

 

 

• preventDefault: 이벤트에 대해 브라우저가 기본적으로 수행하는 작업 취소
  • ex1) <form> submit (submitEvent):
    form을 submit하면 브라우저는 기본적으로 페이지를 새로고침하지만, 
    preventDefault를 추가하면 새로고침하지 않음
  • ex2) <a> link (mouseEvent):
    링크 클릭하면 연결된 사이트로 이동하지만,
    preventDefault를 추가하면 해당 사이트로 이동하지 않음
• 참고
  • form 태그에 'submit' 이벤트를 붙이면 submit 버튼을 누를 때 이벤트 발생
  • 이벤트를 연결해놓은 function의 첫 번째 argument에 현재 실행된 event에 대한 정보를 넘겨줌 (event object)