event.preventDefault()는 JavaScript의 이벤트 객체(event object)의 메서드로, 브라우저가 특정 이벤트에 대해 미리 정의한 기본 동작을 중지시킵니다. 브라우저가 기본적으로 수행하는 동작(예: 링크 클릭 시 페이지 이동)을 하지 않도록 막고, 개발자가 원하는 동작을 커스터마이즈할 수 있게 합니다.
사용법
기본적으로 preventDefault()는 이벤트 리스너 함수 내에서 호출하여, 이벤트가 발생했을 때 브라우저의 기본 동작이 실행되지 않도록 막습니다.
event.preventDefault();예시) 링크의 기본 동작 중지
HTML의 <a> 태그는 기본적으로 링크를 클릭하면 href 속성에 명시된 URL로 페이지가 이동합니다. 이 기본 동작을 event.preventDefault()로 중지할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>preventDefault Example</title>
</head>
<body>
<a href="https://example.com" id="link">Example.com으로 이동</a>
<script>
document.getElementById("link").addEventListener("click", function(event) {
event.preventDefault();
console.log("링크 클릭은 중지되었지만, 브라우저는 페이지 이동을 하지 않습니다.");
});
</script>
</body>
</html>사용 예시
1) 폼 제출 시 페이지 새로 고침 방지
HTML 폼은 기본적으로 제출 시 페이지를 새로 고칩니다. 이를 방지하려면 event.preventDefault()를 사용해 브라우저의 새로 고침 동작을 막고, JavaScript로 폼 데이터를 처리할 수 있습니다.
<form id="myForm">
<input type="text" name="name" placeholder="이름 입력">
<button type="submit">제출</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault();
console.log("폼 제출이 중지되었습니다. 데이터를 JavaScript로 처리합니다.");
// 폼 데이터 처리 로직
});
</script>2) 마우스 오른쪽 클릭 방지
마우스 오른쪽 클릭 시 기본적으로 컨텍스트 메뉴가 열립니다. 특정 상황에서는 오른쪽 클릭 메뉴를 막고 싶은 경우가 있습니다.
<div id="myDiv" style="width: 200px; height: 100px; background-color: lightblue;">
오른쪽 클릭 금지 영역
</div>
<script>
document.getElementById("myDiv").addEventListener("contextmenu", function(event) {
event.preventDefault();
console.log("오른쪽 클릭 메뉴가 열리지 않습니다.");
});
</script>3) 드래그 앤 드롭 기본 동작 막기
HTML 요소를 드래그할 때 기본적으로 브라우저가 그 요소를 드래그 가능한 상태로 만듭니다. 예를 들어, 이미지가 드래그되어 새 창에 열리는 것을 막을 수 있습니다.
<img src="https://via.placeholder.com/150" alt="이미지" id="image">
<script>
document.getElementById("image").addEventListener("dragstart", function(event) {
event.preventDefault();
console.log("이미지 드래그가 중지되었습니다.");
});
</script>event.preventDefault()와 return false의 차이
과거에는 return false를 사용해 기본 동작을 막았지만, return false는 기본 동작을 막을 뿐만 아니라 이벤트 전파도 멈추게 합니다. event.preventDefault()는 기본 동작만 중지하고 이벤트 전파는 계속 이어지기 때문에, 기본 동작만 막고 싶을 때는 event.preventDefault()가 더 명확하고 안전한 방법입니다.
