JavaScript의 onfocusout 이벤트는 요소가 포커스를 잃으려고 할 때 발생합니다. 즉, 사용자가 입력 필드나 다른 요소에서 다른 곳으로 시점을 옮기는 순간 특정 동작을 실행할 수 있게 해주는 유용한 이벤트입니다.
onfocusout 이벤트란?
onfocusout은 blur 이벤트와 비슷하지만 한 가지 중요한 차이점이 있습니다. blur 이벤트는 버블링(bubbling)되지 않지만, onfocusout은 부모 요소로 버블링됩니다. 따라서 자식 요소들이 포커스를 잃을 때 부모 요소에서 일괄적으로 감지해야 하는 경우에 특히 유용합니다.
기본 예제 코드
아래 예제에서는 입력 필드가 포커스를 잃었을 때 배경색이 파란색으로 변경되도록 구현했습니다. 직접 코드를 실행해 보면서 onfocusout 이벤트의 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<body>
<p>아래 입력창에 내용을 작성해 보세요:</p>
<p>포커스를 잃으면 입력창의 배경색이 파란색으로 변경됩니다.</p>
<input type = "text" onfocusout = "newFunc(this)">
<script>
function newFunc(x) {
x.style.background = "blue";
}
</script>
</body>
</html>코드 설명
위 코드의 동작 원리를 단계별로 살펴보면 다음과 같습니다.
- 입력 요소(
<input>)에onfocusout속성으로newFunc함수를 연결합니다. - 사용자가 입력 중인 상태에서 입력창 바깥을 클릭하거나 Tab 키로 이동하면 포커스가 해제됩니다.
- 이때
newFunc함수가 호출되며, 매개변수this를 통해 해당 입력 요소 자체가 전달됩니다. - 함수 내부에서
x.style.background = "blue"코드가 실행되어 입력창의 배경색이 파란색으로 변경됩니다.
addEventListener 방식으로 사용하기
HTML 속성 대신 JavaScript 코드에서 이벤트 리스너를 등록하는 방법도 있습니다. 이 방식은 HTML과 스크립트를 분리할 수 있어 코드 관리에 더 유리합니다.
const input = document.querySelector("input");
input.addEventListener("focusout", function () {
this.style.background = "blue";
});활용 사례
onfocusout 이벤트는 실무에서 다양하게 활용됩니다. 대표적인 예는 다음과 같습니다.
- 입력값 유효성 검사: 사용자가 입력을 마치고 포커스를 옮길 때 이메일 형식이나 비밀번호 조건을 검증합니다.
- 안내 문구 표시/숨김 처리: 포커스가 벗어날 때 도움말 메시지를 제거하거나 오류 메시지를 표시합니다.
- 자동 저장 기능: 폼 작성 도중 포커스가 이동하면 입력 내용을 임시 저장합니다.
주의 사항
onfocusout은 표준 DOM 이벤트이지만, 과거 일부 브라우저(특히 구버전 Firefox)에서는 지원하지 않았습니다. 최신 브라우저에서는 대부분 정상적으로 동작하므로 안심하고 사용할 수 있으며, 호환성이 걱정된다면 blur 이벤트를 대안으로 고려할 수 있습니다.