[JavaScript] event.preventDefault()

정호·2023년 3월 11일
1

JavaScript

목록 보기
7/12
post-custom-banner

event.preventDefault()에 대해

<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에 대해서도 알아보면 좋을거같다.

profile
열심히 기록할 예정🙃
post-custom-banner

0개의 댓글