e.preventDefault(기본 동작을 중단)

기본적으로 a태그의 href 이벤트, form태그의 submit은 페이지를 전환하거나 리로드 된다.

이와 같은 기본 이벤트 동작들을 중단할 수 있다.

 

a태그를 눌렀을때 링크이동을 시키지 않을 경우,

form 태그의 submit를 눌렀을때 새로 실행하지 않고 싶을 경우 사용

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

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

loginForm.addEventListener("submit", onLoginSubmit);

위와 같은 코드가 있을때, event.preventDefault(); 가 없으면 Log In 버튼을 클릭 했을시 

페이지가 리로드되어 "남아있나"라는 텍스트가 사라지게 되지만,

event.preventDefault();를 사용할 시 기본적인 동작을 멈추고 "남아있나"라는 텍스트가 유지된다.

 

※참 고

JS는 함수를 실행시키는 동시에 그 함수에 첫번째 인자로 object를 넣어준다.

즉,  loginForm.addEventListener("submit", onLoginSubmit); 호출시

onLoginSubmit({}); 가 제공되며 {}안에는 이벤트 정보 ojbect가 들어있다. 

 

통상적으로 JS에서 넣어주는 object를 event로 사용

이를 로깅해보면 여러 정보를 확인할 수 있다.

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

비슷한 함수로는 stopPropagation()이 있다. (부모 태그로 이벤트를 전파하는 것을 막음)