[JS] 브라우저 기본 동작 막기: e.preventDefault()

브라우저 기본 동작 

: 특정 HTML 요소에 대해 기본적으로 수행하는 동작

• 링크(<a>)를 클릭하면 해당 URL로 이동
• 폼(form)을 제출하면 페이지가 새로고침되면서 폼 데이터가 서버로 전송
• 체크박스(<input type="checkbox">)를 클릭하면 체크 상태가 변경

 

 

 

 

브라우저 기본 동작 막기 ⛔

1. event.preventDefault()

: 특정 이벤트의 기본 동작을 막고 자바스크립트로 정의한 동작을 사용해야 할 경우 사용

• 기본 동작(링크 클릭, 폼 제출, 체크박스 클릭 등)을 제어할 때 사용
• 사용자가 정의한 동작을 구현할 때 유용

<a href="https://www.example.com" id="myLink">Example Link</a>

<script>
    document.getElementById('myLink').addEventListener('click', function(e) {
        e.preventDefault();
        alert('링크가 클릭되었지만, 페이지는 이동하지 않습니다.');
    });
</script>

 

 

 

2. on<event> 속성 사용 시 "false" 반환

• 코드 가독성과 유지보수성을 위해 addEventListener와 e.preventDefault()를 사용하는 것이 좋다.

<a href="https://www.example.com" onclick="return myFunction()">Example Link</a>

<script>
    function myFunction() {
        alert('링크가 클릭되었지만, 페이지는 이동하지 않습니다.');
        return false;
    }
</script>

 

 

---

 

브라우저 기본 동작