자바스크립트 포커스 이벤트: focus, blur 처리하기

웹 페이지에서 사용자가 입력하거나 상호작용할 때 포커스 이벤트는 중요한 역할을 합니다. 이 글에서는 예제로 자바스크립트를 사용하여 포커스 이벤트를 처리하는 방법에 대해서 알아보겠습니다.

1. 포커스 이벤트

포커스 이벤트는 사용자가 웹 페이지의 특정 요소에 포커스를 맞추거나 포커스를 벗어날 때 발생합니다. 주로 입력 양식(form) 요소에 사용되지만 다른 요소에도 적용할 수 있습니다. 포커스 이벤트는 다음 두 가지로 나눌 수 있습니다.

▼ 포커스 이벤트

이벤트	설명
focus	요소에 포커스가 맞춰졌을 때 발생합니다.
blur	요소에서 포커스가 벗어났을 때 발생합니다.

2. focus와 blur 이벤트 처리하기 예제

자바스크립트를 사용하여 focus와 blur 이벤트를 처리하려면 이벤트 리스너를 등록하고 이벤트 발생 시 실행할 함수를 작성해야 합니다.

예제 1: input 태그에 onfocus, onblue 이벤트 함수 추가

1. 예제 코드

<!DOCTYPE html>
<html>

<head>
     <title>포커스 이벤트 예제</title>
     <script>
     // input 요소에 포커스가 생겼을 때 실행되는 함수
     function handleFocus() {
     console.log('포커스가 생겼습니다.');
     }

     // input 요소에서 포커스가 사라졌을 때 실행되는 함수
     function handleBlur() {
     console.log('포커스가 사라졌습니다.');
     }
     </script>
</head>

<body>
     <input type="text" onfocus="handleFocus()" onblur="handleBlur()" />
</body>

</html>

2. 실행 결과 화면

input 태그에 onfocus, onblue 이벤트 함수 추가 예제 코드 실행 결과 화면입니다.

예제 2: 자바스크립트를 사용하여 focus와 blur 이벤트 처리

1. 예제 코드

<!DOCTYPE html>
<html>
<head>
     <title>자바스크립트 포커스 이벤트 예제</title>
     <style>
     /* 포커스가 생긴 input 요소에 배경색을 변경하는 CSS 스타일 */
     .focused {
     background-color: yellow;
     }
     </style>
</head>
<body>

     <input type="text" id="input-field" placeholder="여기에 입력하세요">

     <script>
     // input 요소를 DOM에서 선택
     const inputField = document.getElementById('input-field');

     // input 요소에 포커스가 생겼을 때 실행되는 함수
     inputField.addEventListener('focus', function() {
     inputField.classList.add('focused'); // 포커스가 생긴 input 요소에 'focused' 클래스를 추가
     });

     // input 요소에서 포커스가 사라졌을 때 실행되는 함수
     inputField.addEventListener('blur', function() {
     inputField.classList.remove('focused'); // 포커스가 사라진 input 요소에서 'focused' 클래스를 제거
     });
     </script>

</body>
</html>

☞ input 요소에 포커스가 맞춰졌을 때 ‘focused’라는 클래스가 추가되어 배경색이 노란색으로 변경됩니다. 포커스가 벗어났을 때, ‘focused’ 클래스가 제거되어 배경색이 원래대로 돌아옵니다.

2. 실행 결과 화면