<a>
와<submit>
와 같은 몇몇 태그들은 특수한 기능을 가지고 있다.
<a>
: href에 연결된 링크를 통해, 해당 페이지로 이동하는 기능을 가지고 있으며
<submit>
: 태그의 값을 전송하면서 해당 페이지를 새로고침 하는 기능을 가지고 있다. 이러한 기능들은 매우 유용하지만, 그 의도로 사용하지 않게 될 경우 의도치 않은 결과가 나올 수 있다. 이때 사용하는 것이 바로 event.preventDefault() 이다.
<a>
태그
<a href="https://velog.io/@jungo_0" id="link">jungo의 velog</a>
<script>
document.querySelector('#link').addEventListener('click', function(e){
e.preventDefault();
});
// 태그를 클릭했을때 preventDefault를 사용했기 때문에 링크값이 있어도 이동하지 않는다.
</script>
<submit>
태그
const clickSubmit = (e) => {
e.preventDefault();
loginForm.classList.add("hidden");
}
이후에 stopPropagation에 대해서도 알아보면 좋을거같다.