onfocusin 이벤트란?
onfocusin 이벤트는 요소가 포커스(focus)를 받기 직전에 발생하는 이벤트입니다. 원래 인터넷 익스플로러(IE)에서 지원하던 비표준 이벤트로, 최신 브라우저 환경에서는 표준 이벤트인 focusin을 사용하는 것이 권장됩니다. 일반적인 focus 이벤트와 달리 focusin 계열 이벤트는 버블링(bubbling)이 가능하다는 특징이 있습니다.
다음 예제 코드를 실행하면 JavaScript에서 onfocusin 이벤트를 구현하는 방법을 바로 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<p>아래 입력창을 클릭해 보세요:</p>
<input type="text" onfocusin="newFunc(this)">
<script>
function newFunc(x) {
x.style.background = "blue";
}
</script>
</body>
</html>코드 설명
- <input> 요소에 onfocusin 속성을 지정하여, 입력창에 포커스가 발생하는 순간 newFunc() 함수가 호출되도록 설정했습니다.
- this 키워드를 통해 이벤트가 발생한 입력 요소 자체가 함수의 매개변수 x로 전달됩니다.
- 함수가 실행되면 해당 요소의 스타일이 변경되어 입력창의 배경색이 파란색(blue)으로 바뀝니다.
이처럼 onfocusin 이벤트를 활용하면 사용자가 특정 요소에 진입하는 순간 스타일 변경, 안내 메시지 표시, 유효성 검사 준비 등 다양한 동작을 손쉽게 처리할 수 있습니다.