JavaScript의 onreset 이벤트는 폼(form)이 초기화될 때 발생하는 이벤트입니다. 사용자가 폼 안의 초기화(reset) 버튼을 클릭하면 입력된 내용이 모두 지워지는데, 이 순간에 알림을 표시하거나 추가 작업을 수행하고 싶을 때 onreset 이벤트를 활용할 수 있습니다.
onreset 이벤트란?
onreset 이벤트는 <form> 요소에 적용되며, 폼이 리셋되는 시점에 자동으로 트리거됩니다. 예를 들어 "폼이 초기화되었습니다"라는 메시지를 보여주거나, 초기화 전에 사용자에게 확인을 요청하는 등의 처리가 가능합니다.
예제 코드
아래 코드는 onreset 이벤트를 구현하는 방법을 보여줍니다. 초기화 버튼을 누르면 resetFunct() 함수가 호출되어 알림 창이 나타납니다.
<!DOCTYPE html>
<html>
<body>
<script>
function resetFunct() {
alert("The form was reset");
}
</script>
<form onreset = "resetFunct()">
Enter age: <input type = "number"><br>
Enter birth month: <input type = "text"><br>
<input type = "reset">
</form>
</body>
</html>코드 설명
- <form> 태그에
onreset="resetFunct()"속성을 추가하여 폼이 초기화될 때 지정한 함수가 실행되도록 설정합니다. type="reset"버튼을 클릭하면 폼의 모든 입력 필드가 기본값으로 되돌아가며, 동시에 onreset 이벤트가 발생합니다.alert()함수를 통해 폼이 초기화되었음을 사용자에게 알려줍니다.
참고 사항
onreset 이벤트 핸들러에서 false를 반환하면 폼 초기화를 취소할 수 있어, 실수로 인한 데이터 삭제를 방지하는 용도로도 활용할 수 있습니다. 또한 최신 JavaScript에서는 addEventListener('reset', ...) 방식으로도 동일하게 이벤트를 처리할 수 있습니다.