preventDefault() 사용법 | ChatGPT

preventDefault() 메서드

JavaScript에서 이벤트 객체( event)를 사용하여 브라우저의 기본 동작을 중단하는 메서드입니다.

이 메서드는 주로 HTML 요소의 이벤트 처리기 함수에서 사용되며, 특히 하이퍼링크 클릭, 폼 제출 및 기타 이벤트에 대한 기본 동작을 중지할 때 유용합니다.

아래는 preventDefault()의 사용법과 예제입니다.

// 예제 1: 하이퍼링크의 클릭 이벤트에서 기본 동작 중지
document.querySelector('a').addEventListener('click', function(event) {
    event.preventDefault(); // 클릭 이벤트의 기본 동작(링크 이동)을 중지
    // 추가적인 로직을 수행
});

// 예제 2: 폼 제출 이벤트에서 기본 동작 중지
document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); // 폼 제출 이벤트의 기본 동작(페이지 리로드)을 중지
    // 폼 데이터를 수집하거나 AJAX 요청을 보내는 등의 로직 수행
});

예제 1에서는 하이퍼링크의 클릭 이벤트를 가로채고, event.preventDefault();를 호출하여 링크의 기본 동작(새로운 페이지로 이동)을 중지합니다. 그런 다음 이벤트 처리기 함수에서 추가적인 로직을 수행할 수 있습니다.

예제 2에서는 폼 제출 이벤트를 가로채고, event.preventDefault();를 호출하여 폼의 기본 동작(페이지 리로드 또는 새로운 페이지로 이동)을 중지합니다. 이로써 폼 데이터 수집, 유효성 검사 또는 AJAX 요청 등을 수행할 수 있습니다.

이벤트 객체의 preventDefault 메서드를 사용하면 기본 동작을 중단하고 사용자 지정 로직을 실행할 수 있어 웹 애플리케이션에서 유용하게 활용됩니다.

출처 | ChatGPT