목차
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 이벤트 : 이벤트 확산 Xonfocusin 이벤트 : 이벤트 확산 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>
결과보기
