onblur 이벤트는 입력 필드나 버튼 같은 HTML 요소가 포커스(focus)를 잃는 순간 발생하는 이벤트입니다. 사용자가 텍스트 상자에 내용을 입력한 뒤 다른 곳을 클릭하거나 Tab 키로 이동할 때 실행되므로, 폼 유효성 검사나 입력값 확인 등에 자주 활용됩니다.
onblur 이벤트 기본 동작 원리
blur 이벤트는 객체가 포커스를 잃을 때 트리거됩니다. 즉, 요소에 포커스가 있다가 벗어나는 시점에 지정한 함수가 호출됩니다. 아래 예제를 직접 실행해 보면 onblur 이벤트가 JavaScript에서 어떻게 구현되는지 쉽게 이해할 수 있습니다.
예제 코드
다음 예제에서는 텍스트 입력 상자에서 포커스가 벗어나는 순간 해당 입력 상자의 배경색이 초록색으로 변경됩니다.
<!DOCTYPE html>
<html>
<body>
<p>아래에 내용을 입력하세요:</p>
<input type = "text" onblur = "newFunc(this)">
<script>
function newFunc(a) {
a.style.background = "green";
}
</script>
</body>
</html>
코드 설명
위 코드의 핵심은 onblur = "newFunc(this)" 부분입니다. 입력 상자가 포커스를 잃으면 newFunc 함수가 호출되고, 매개변수 this를 통해 이벤트가 발생한 요소 자신이 전달됩니다. 함수 안에서는 a.style.background = "green"; 코드로 해당 요소의 배경색을 초록색으로 바꿉니다.
onblur 이벤트의 주요 활용 사례
onblur 이벤트는 다양한 상황에서 유용하게 사용됩니다.
- 폼 유효성 검사: 사용자가 이메일 주소나 비밀번호 입력을 마치고 포커스를 옮길 때 입력값이 올바른 형식인지 즉시 검사할 수 있습니다.
- 실시간 피드백 제공: 잘못된 입력이 있을 경우 배경색 변경이나 안내 메시지 표시로 즉각적인 피드백을 줄 수 있습니다.
- 자동 저장 및 데이터 처리: 입력이 완료된 시점을 감지해 데이터를 서버로 전송하거나 임시 저장하는 용도로도 활용됩니다.
이처럼 onblur 이벤트는 사용자의 입력 흐름을 자연스럽게 감지하고 반응형 웹 페이지를 만드는 데 꼭 필요한 기본 이벤트 중 하나입니다.