preventDefault()란 무엇인가?
preventDefault()는 이벤트가 발생했을 때 브라우저의 기본 동작을 중단시키는 메서드입니다. 예를 들어, 링크(URL)를 클릭했을 때 페이지가 이동하지 않도록 막는 등의 기능을 수행합니다.
return false란 무엇인가?
return false 역시 이벤트 발생 시 브라우저의 기본 동작을 중단시키지만, 여기에 더해 이벤트 전파(event propagation)까지 차단합니다. 또한 호출되는 즉시 콜백 함수의 실행이 중단된다는 점이 특징입니다.
즉, 두 방식의 핵심적인 차이는 다음과 같습니다.
- preventDefault(): 브라우저의 기본 동작만 차단하며, 이벤트 전파는 계속 진행됩니다.
- return false: 기본 동작을 차단하고, 이벤트 전파도 막으며, 함수 실행을 즉시 종료합니다.
예제 코드
다음은 JavaScript에서 preventDefault()와 return false의 동작을 비교하는 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-weight: 500;
font-size: 18px;
color: blueviolet;
}
</style>
</head>
<body>
<h1>preventDefault() vs return false</h1>
<a href="https://www.google.com" class="link">Google</a>
<input type="checkbox" class="check" onclick="return checkedOrNot(false)" /><br />
<div class="result"></div>
<br />
<div class="result"></div>
<h3>위의 링크나 체크박스를 클릭하면 preventDefault() 또는 return false의 동작을 확인할 수 있습니다</h3>
<script>
let resEle = document.querySelectorAll(".result");
let linkEle = document.querySelector(".link");
let checkEle = document.querySelector(".check");
function printText(event) {
resEle[0].innerHTML = "preventDefault()가 링크의 기본 동작을 중단했습니다";
event.preventDefault();
}
function checkedOrNot(val) {
if (val === true) {
checkEle.checked = true;
} else {
resEle[1].innerHTML =
"return false가 체크박스 선택을 막았습니다";
return false;
}
}
linkEle.addEventListener("click", printText);
</script>
</body>
</html>실행 결과
'Google' 링크를 클릭하면 다음과 같이 페이지가 이동하지 않고 메시지가 표시됩니다.
체크박스를 클릭하면 체크되지 않고 아래와 같은 메시지가 나타납니다.
정리
jQuery 환경에서는 return false가 preventDefault()와 stopPropagation()을 모두 수행하는 것과 같지만, 순수 JavaScript(바닐라 JS)의 인라인 이벤트 핸들러에서는 주로 기본 동작 차단 용도로 사용됩니다. 상황에 따라 적절한 방법을 선택하는 것이 중요합니다. 일반적으로 명확성을 위해 event.preventDefault()와 event.stopPropagation()을 각각 명시적으로 호출하는 것이 권장됩니다.