자바스크립트 폼 이벤트(Form Events)와 PreventDefault

자바스크립트에서 폼(Form)은 웹 사이트에서 사용자 입력을 받는 가장 일반적인 방법 중 하나입니다. 폼은 일반적으로 텍스트 상자, 비밀번호 상자, 라디오 버튼, 체크 박스 등의 입력 필드로 구성되며, 사용자는 이러한 필드를 작성하여 웹 페이지의 서버로 데이터를 제출할 수 있습니다.

 

폼에서 발생하는 이벤트는 대부분 HTML 이벤트와 유사하지만, 몇 가지 독특한 이벤트가 있습니다. 이번 글에서는 자바스크립트에서 폼 이벤트를 어떻게 처리할 수 있는지 알아보고, 이벤트 객체의 preventDefault() 메서드가 무엇이고 어떻게 사용하는지 살펴보겠습니다.

 

 

폼 이벤트 종류

 

자바스크립트에서는 다양한 폼 이벤트를 다룰 수 있습니다. 이 중 가장 일반적인 이벤트는 다음과 같습니다.

 

submit: 폼이 제출될 때 발생하는 이벤트입니다.

reset: 폼이 재설정될 때 발생하는 이벤트입니다.

change: 폼에서 값이 변경될 때 발생하는 이벤트입니다.

input: 폼에서 값이 입력될 때 발생하는 이벤트입니다.

focus: 폼 요소에 포커스가 갔을 때 발생하는 이벤트입니다.

blur: 폼 요소에서 포커스가 벗어날 때 발생하는 이벤트입니다.

 

이러한 이벤트를 사용하여 사용자 입력을 수신하고 폼의 내용을 처리할 수 있습니다.

 

 

preventDefault() 메서드

 

preventDefault() 메서드는 이벤트가 발생했을 때 기본적으로 발생하는 동작을 중지시키는 역할을 합니다. 예를 들어, 사용자가 폼을 제출할 때 submit 이벤트가 발생하고 폼의 내용이 서버로 전송됩니다. 그러나 때로는 사용자가 실수로 잘못된 데이터를 제출하거나, 자바스크립트를 사용하여 데이터의 유효성을 검사하고 제출을 방지해야 하는 경우가 있습니다. 이때 preventDefault() 메서드를 사용하여 폼이 제출되는 것을 막을 수 있습니다.

 

preventDefault() 메서드는 이벤트 객체의 메서드로 사용되며, 호출되면 이벤트가 발생했을 때 발생하는 기본 동작이 중지됩니다. 예를 들어, 다음 코드는 submit 이벤트가 발생했을 때 폼이 제출되지 않도록 합니다.

 

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
	event.preventDefault();
}