preventDefault() 이란

백엔드&인프라 추종자·2025년 2월 11일

html/css/js

목록 보기

9/11

event.preventDefault()는 이벤트의 기본 동작을 취소하는 메서드입니다. 주로 브라우저가 자동으로 수행하는 기본 동작을 막고, 자체적으로 처리할 동작을 정의하고 싶을 때 사용합니다.

✅ 왜 사용하냐?

event.preventDefault()를 사용하는 이유는 여러 가지가 있습니다. 대표적인 몇 가지 경우를 살펴보겠습니다.

1. 폼 제출 방지

HTML 폼을 제출할 때, 기본적으로 폼이 제출되면 페이지가 새로 고침됩니다. 하지만, JavaScript를 사용하여 폼 데이터를 비동기적으로 처리하고 싶을 때, 폼 제출의 기본 동작을 방지할 수 있습니다.

예시: 폼 제출 시 페이지 새로고침을 방지하고, JavaScript로 데이터를 처리

<form id="myForm">
    <input type="text" id="username">
    <button type="submit">Submit</button>
</form>

<script>
    document.getElementById('myForm').addEventListener('submit', function(event) {
        event.preventDefault();  // 기본 제출 방지

        // 폼 데이터 처리
        const username = document.getElementById('username').value;
        console.log(username);  // 서버에 비동기적으로 전송하거나 다른 작업을 수행
    });
</script>

여기서 event.preventDefault()는 폼이 제출된 후 페이지가 새로 고침되는 기본 동작을 막고, JavaScript 코드에서 폼 데이터를 처리할 수 있게 합니다.

2. 링크 클릭 시 페이지 이동 방지

링크(<a>)를 클릭할 때 기본적으로 해당 링크로 이동하는 동작이 발생합니다. 하지만, JavaScript로 사용자 정의 동작을 실행한 후 이동을 제어하고 싶을 때, preventDefault()를 사용하여 페이지 이동을 막을 수 있습니다.

예시: 링크 클릭 시 이동을 방지하고 다른 작업을 실행

<a href="https://example.com" id="myLink">Go to Example</a>

<script>
    document.getElementById('myLink').addEventListener('click', function(event) {
        event.preventDefault();  // 링크 이동 방지

        console.log("링크 클릭됨! 페이지 이동은 하지 않음.");
        // 여기서 Ajax 요청이나 다른 작업을 수행하고, 원할 경우 직접 페이지 이동
    });
</script>

event.preventDefault()를 사용하면 링크 클릭 시 이동하지 않고, 대신 다른 작업을 처리할 수 있습니다.

3. 드래그 앤 드롭 동작 제어

웹에서 드래그 앤 드롭을 구현할 때, 기본적으로 브라우저가 파일을 드래그하여 업로드하는 동작을 자동으로 처리할 수 있습니다. 하지만, JavaScript에서 드래그 앤 드롭 동작을 완전히 제어하려면, 기본 동작을 막아야 할 때가 있습니다.

예시: 드래그 앤 드롭에서 기본 동작 방지

<div id="dropZone" style="width: 200px; height: 200px; background-color: lightgrey;">
    Drop here
</div>

<script>
    const dropZone = document.getElementById('dropZone');

    dropZone.addEventListener('dragover', function(event) {
        event.preventDefault();  // 기본 드래그 동작 방지
    });

    dropZone.addEventListener('drop', function(event) {
        event.preventDefault();  // 기본 드롭 동작 방지
        console.log("파일이 드롭되었습니다.");
    });
</script>

event.preventDefault()를 사용하여 기본적인 드래그 앤 드롭 동작을 막고, 자신만의 동작을 정의할 수 있습니다.

4. 키보드 이벤트에서 기본 동작 방지

특정 키에 대해 브라우저가 기본적으로 실행하는 동작을 막고, 그 대신 자신만의 동작을 실행하고 싶을 때도 사용됩니다.

예시: Enter 키로 폼 제출을 방지하고 다른 작업을 실행

<form id="myForm">
    <input type="text" id="username">
    <button type="submit">Submit</button>
</form>

<script>
    document.getElementById('username').addEventListener('keydown', function(event) {
        if (event.key === "Enter") {
            event.preventDefault();  // Enter 키로 폼 제출 방지
            alert("Enter 키 눌림! 폼 제출을 막았습니다.");
        }
    });
</script>

event.preventDefault()를 사용하여 Enter 키로 인한 폼 제출을 막고, 그 대신 원하는 동작을 할 수 있습니다.

🔑 기본 동작을 막지 않으면?

event.preventDefault()를 호출하지 않으면, 이벤트가 발생했을 때 브라우저의 기본 동작이 그대로 실행됩니다. 예를 들어:

링크 클릭 시 페이지가 이동
폼 제출 시 페이지 새로고침
드래그 앤 드롭 시 파일 업로드

따라서, 특정 동작을 제어하고 싶을 때 preventDefault()를 사용하여 브라우저의 기본 행동을 취소하고, 자신만의 동작을 정의할 수 있습니다.

결론

event.preventDefault()는 브라우저의 기본 동작을 취소하는 데 사용됩니다. 이를 통해 자체적인 동작을 정의하거나, 기본 동작을 제어할 수 있습니다. 주로 폼 제출, 링크 클릭, 드래그 앤 드롭 등에서 사용되며, 사용자 정의 이벤트 처리를 위해 필수적인 메서드입니다.