JavaScript 포커스 이벤트란?
포커스(focus) 이벤트는 웹 문서 내 요소가 포커스를 받거나 잃는 시점에 발생하는 이벤트입니다. 주로 로그인 폼, 검색창 등 입력 요소에서 사용자의 상호작용을 감지하여 시각적 피드백을 제공하거나 유효성 검사를 수행할 때 널리 활용됩니다.
포커스 관련 이벤트 종류
| 이벤트 | 설명 |
|---|---|
| blur | 요소가 포커스를 잃었을 때 발생합니다. |
| focus | 요소가 포커스를 받았을 때 발생합니다. |
| focusin | 요소가 포커스를 받기 직전에 발생하며, focus와 달리 이벤트 버블링이 일어납니다. |
| focusout | 요소가 포커스를 잃기 직전에 발생하며, blur와 달리 이벤트 버블링이 일어납니다. |
다음은 JavaScript로 포커스 이벤트를 처리하는 예제 코드입니다. 비밀번호 입력 필드에 포커스가 들어오면 해당 필드의 배경색을 변경하는 간단한 데모입니다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>JavaScript 포커스 이벤트</h1>
<form id="form">
<input type="text" placeholder="사용자 이름" />
<input class="passW" type="password" placeholder="비밀번호" />
</form>
<h3>위 비밀번호 입력 상자에 포커스를 맞추면 배경색이 변경됩니다</h3>
<script>
let passEle = document.querySelector(".passW");
passEle.addEventListener("focus", () => {
passEle.style.backgroundColor = "#90EE90";
});
</script>
</body>
</html>실행 결과
페이지를 열고 비밀번호 입력 필드를 클릭해 포커스를 맞추면 다음과 같이 배경색이 연한 초록색(#90EE90)으로 변경되는 것을 확인할 수 있습니다.
비밀번호 필드에 포커스가 있는 상태 −
focus와 focusin의 차이점
focus와 blur는 이벤트 버블링이 발생하지 않지만, focusin과 focusout은 부모 요소로 이벤트가 전파(버블링)됩니다. 따라서 여러 입력 필드를 가진 폼에서 각각 리스너를 등록하지 않고 부모 요소 하나에만 이벤트를 걸어 처리하는 이벤트 위임(event delegation) 기법을 사용할 때는 focusin과 focusout을 활용하는 것이 효율적입니다.