목차
- focusout() 예제 - 포커스 잃을 때 영문을 대문자로 자동 변환
- focusout() 정의
- focusout() 구문
- focusout() 예제 - (onfocusin / onfocusout) 이벤트 함께 걸 때
- focusout() 예제 - (focus / blur) 이벤트를 addEventListener() 메서드로 걸 때
- focusout() 예제 - (focusin / focusout) 이벤트를 addEventListener() 메서드로 걸 때
focusout() 예제 - 포커스 잃을 때 영문을 대문자로 자동 변환
<input type="text" id="hz" onfocusout="homzzang()">
<script>
function homzzang() {
var x = document.getElementById("hz");
x.value = x.value.toUpperCase();
}
</script>
결과보기
focusout() 정의
요소가 포커스 잃을 때 이벤트 발생.
1.
onblur 이벤트와 유사하나 아래와 같은 차이점 존재.
- onblur 이벤트 : 이벤트 확산 X
- onfocusout 이벤트 : 이벤트 확산 O
∴ 요소 또는 해당 자식이 포커스 잃는지 확인하려면 onfocus
2.
focusout 이벤트의 반대는 focusin 이벤트임.
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메서드 방식 이용해야 함.
focusout() 구문
HTML 속성 방식
<element onfocusout="myScript">
JS 속성 방식 (주의: Chrome, Safari, Opera 15+ 등에서 오작동 가능)
object.onfocusout = function(){myScript};
JS 매서드 방식
object.addEventListener("focusout", myScript);
focusout() 예제 - (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>
결과보기
focusout() 예제 - (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>
결과보기
focusout() 예제 - (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>
결과보기
