[JavaScript] 브라우저 기본 동작 제어 : preventDefault()

웹 브라우저에는 기본적으로 수행되는 행동들이 있다.
예를 들어, 폼 제출 시 페이지 새로고침, 링크 클릭 시 페이지 이동 등이 이에 해당한다.
JavaScript의 preventDefault()를 사용하면 이러한 기본 동작을 막고 원하는 동작을 직접 제어할 수 있다.

 

 

 

---

 

 

1. form의 기본 동작

• <form>은 submit 이벤트가 발생하면 페이지를 새로고침하며 데이터를 전송한다.
• 텍스트 입력창에서 Enter를 눌러도 자동으로 submit이 발생한다.
• 즉, 폼 제출 = 새로고침 + 데이터 전송이 기본 동작.

 

preventDefault()로 제어

 

<form id="login-form">
    <input 
        required
        type="text"
        maxlength="6"
        placeholder="What is your name?"
    />
    <input type="submit" value="Log In">
</form>​

const loginForm = document.getElementById("login-form"); 

function onLoginSubmit(e) { 
	e.preventDefault(); // 폼 제출 시 새로고침 방지 
    console.log(e); // 이벤트 객체 확인
} 
    
loginForm.addEventListener("submit", onLoginSubmit);

폼에서 submit 이벤트가 발생하면 기본적으로 새로고침이 일어나는데
e.preventDefault()를 사용하면 이 기본 동작을 막고 JavaScript가 원하는 흐름으로 제어할 수 있다.

 

2. 링크(<a>)의 기본 동작

 

• 링크를 클릭하면 브라우저는 자동으로 해당 URL로 이동
• target="_blank"가 있으면 새 탭/창에서 이동

 

preventDefault()로 제어

 

<a href="https://www.naver.com">NAVER</a>

onst link = document.querySelector("a");

function handleLink(e) {
    e.preventDefault(); // 링크 클릭 시 페이지 이동 방지
    console.log(e);     // 이벤트 객체 확인
    alert("링크 클릭 막기 성공!");
}

link.addEventListener("click", handleLink);

링크 클릭의 기본 동작은 페이지 이동이다.
preventDefault()를 사용하면 이동을 막고 JS로 원하는 행동을 수행할 수 있다.

---

HTML 속성과 preventDefault() 차이
구분	HTML 속성 (href, target)	JS preventDefault()
동작	클릭 시 URL로 이동 (기본: 같은 창, target="_blank"면 새 창/새 탭)	클릭 시 이동을 막고 JS 실행 가능 (같은 창/새 창 이동 모두 제어 가능)
제어	불가능 (브라우저 기본 동작)	가능 (JS로 자유롭게 처리)
예시	<a href="URL" target="_blank">	e.preventDefault(); alert("click")

 

 

---

 

한 줄 정리

 

• 브라우저 기본 동작
  • 폼 제출 → 새로고침 + 데이터 전송
  • 링크 클릭 → 페이지 이동
• preventDefault()를 사용하면 이 기본 동작을 막고 JS에서 원하는 행동을 제어 가능
• 이벤트 객체(e)에는 이벤트 발생 대상, 시각, 타입 등 다양한 정보가 담겨 있어 콘솔로 확인할 수 있음