목차
- focusin() 예제 - 포커스 시, input 요소 배경색 변경
- focusin() 정의
- focusin() 구문
- focusin() 예제 - (onfocusin / onfocusout) 이벤트 함께 걸 때
- focusin() 예제 - (focus / blur) 이벤트를 addEventListener() 메서드로 걸 때
- focusin() 예제 - (focusin / focusout) 이벤트를 addEventListener() 메서드로 걸 때
focusin() 예제 - 포커스 시, input 요소 배경색 변경
<input type="text" onfocusin="homzzang(this)">
<script>
function homzzang(x) {
x.style.background = "yellow";
}
</script>
결과보기
focusin() 정의
요소가 포커스 상태일 때 이벤트 발생.
1.
onfocus 이벤트와 유사하나 아래와 같은 차이점 존재.
- onfocus 이벤트 : 이벤트 확산 X
- onfocusin 이벤트 : 이벤트 확산 O
∴ 요소 또는 해당 자식이 포커스 얻는지 확인하려면 onfocusin 사용 필요.
2.
focusin 이벤트의 반대는 focusout 이벤트임.
3.
- (HTML / JS)의 속성으로 사용할 경우: onfocusout 형태
- JS addEventListener() 메서드의 매개변수 경우: focusout 형태
4.
- 이벤트확산: O
- 취소가능성: X
- 이벤트타입: FocusEvent
- 지원HTML: 모든 HTML 요소 (단, <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title> 요소는 제외)
- DOM 버전: Level 2 Events
5.
주요 브라우저 모두 지원.
[주의] onfocusout JS속성 방식 경우 오작동 할 수도 있으니, HTML 속성 방식이나 addEventListener() JS메서드 방식 이용해야 함.
focusin() 구문
HTML 속성 방식
<element onfocusin="myScript">
JS 속성 방식 (주의: Chrome, Safari, Opera 15+ 등에서 오작동 가능)
object.onfocusin = function(){myScript};
JS 매서드 방식
object.addEventListener("focusin", myScript);
focusin() 예제 - (onfocusin / onfocusout) 이벤트 함께 걸 때
<input type="text" id="hz" onfocusin="focusCase()" onfocusout="blurCase()">
<script>
function focusCase() {
document.getElementById("hz").style.background = "yellow";
}
function blurCase() {
document.getElementById("hz").style.background = "red";
}
</script>
결과보기
focusin() 예제 - (focus / blur) 이벤트를 addEventListener() 메서드로 걸 때
※ 주의: (focus/blur) 이벤트 경우 기본적으로 이벤트 확산 안 하므로, addEventListener() 매서드의 useCapture 매개변수를 true로 설정 필요.
<form id="hzform">
<input type="text" id="hz">
</form>
<script>
var x = document.getElementById("hzform");
x.addEventListener("focus", focusCase, true);
x.addEventListener("blur", blurCase, true);
function focusCase() {
document.getElementById("hz").style.backgroundColor = "yellow";
}
function blurCase() {
document.getElementById("hz").style.backgroundColor = "";
}
</script>
결과보기
focusin() 예제 - (focusin / focusout) 이벤트를 addEventListener() 메서드로 걸 때
※ 주의: (focusin / focusout) 이벤트 경우 기본적으로 이벤트 확산하므로, addEventListener() 메서드의 useCapture 매개변수를 true로 설정할 필요 없음.
<form id="hzform">
<input type="text" id="hz">
</form>
<script>
var x = document.getElementById("hzform");
x.addEventListener("focusin", focusCase);
x.addEventListener("focusout", blurCase);
function focusCase() {
document.getElementById("hz").style.backgroundColor = "yellow";
}
function blurCase() {
document.getElementById("hz").style.backgroundColor = "";
}
</script>
결과보기
