[JavaScript] event.preventDefault()

종종 코드를 보면 함수에 event.preventDefault()가 적혀있는 것을 종종 보고는 했다. 그래서 정확히 언제 쓰면 좋을 것인지 알아보려고 한다.

event.preventDefault()란?

html(브라우저)에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막아주는 메서드다. 즉, 현재 이벤트의 default 동작을 중단해주는 메서드다.

언제 사용하나?

1. <a>태그의 경우, href에 연결된 링크를 통해 해당 페이지로 이동하는 기능이 있는데, 해당 링크 페이지로 이동하고 싶지 않을 때 사용한다.
2. <submit>태그의 경우, 값을 전송하면서 해당 페이지를 새로고침하는 기능을 가지고 있는데, 이때 값의 유효성 검사 후 전송이 되도록 하고 싶을 때 사용한다.

코드 예시

<a href="https://github.com/Kyeom1997" id="link">김형겸의 깃허브</a>
<script>
	document.querySelector('#link').addEventListener('click', function(e){
		e.preventDefault();
	});
	// a 태그 클릭 시 preventDefault를 사용했기 때문에 링크값이 있어도 이동하지 않는다.
</script>

const onLoginSubmit = (e) => {
  e.preventDefault();
  loginForm.classList.add("hidden");
  const username = loginInput.value;
  localStorage.setItem(USERNAME_KEY, username);
  paintGreetings(username);
}

참고자료

https://velog.io/@hang_kem_0531/JS-event.preventDefault-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0