onfocus 이벤트는 HTML 요소가 포커스(focus)를 받는 순간, 즉 사용자가 입력 필드를 클릭하거나 Tab 키로 해당 요소에 접근했을 때 발생하는 JavaScript 이벤트입니다. 주로 텍스트 입력창(input), 텍스트 영역(textarea), 선택 상자(select) 등 포커스를 가질 수 있는 폼 요소에서 활용됩니다.
이 이벤트를 활용하면 입력 필드가 선택되었을 때 배경색을 변경하거나, 안내 문구를 표시하는 등 다양한 사용자 경험(UX) 개선 효과를 구현할 수 있습니다.
onfocus 이벤트 기본 예제
아래 코드는 텍스트 입력 필드에 포커스가 들어오면 해당 필드의 배경색을 파란색으로 변경하는 간단한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 입력창을 클릭해 보세요:</p>
<input type = "text" onfocus = "newFunc(this)">
<script>
function newFunc(x) {
x.style.background = "blue";
}
</script>
</body>
</html>
코드 설명
위 예제의 동작 방식은 다음과 같습니다.
- input 요소에
onfocus속성을 지정하여, 포커스를 받는 순간newFunc(this)함수가 호출됩니다. this키워드는 현재 포커스를 받은 input 요소 자신을 가리킵니다.newFunc함수는 전달받은 요소의style.background속성을blue로 변경하여 시각적 피드백을 제공합니다.
함께 알아두면 좋은 관련 이벤트
onfocus와 함께 자주 사용되는 이벤트도 알아두면 유용합니다.
- onblur: 요소가 포커스를 잃을 때 발생합니다. onfocus의 반대 개념으로, 입력값 유효성 검사에 많이 활용됩니다.
- onchange: 요소의 값이 변경되고 포커스가 벗어났을 때 발생합니다.
- addEventListener('focus', ...): HTML 속성 대신 JavaScript에서 이벤트 리스너를 등록하는 방식으로, 코드 분리와 유지보수 측면에서 권장됩니다.
이처럼 onfocus 이벤트는 폼 요소와의 상호작용을 감지하여 동적인 웹 페이지를 만드는 데 필수적인 기능입니다.