onfocusout 이벤트
예시
입력 필드가 초점을 잃을 때 JavaScript를 실행하십시오.
<input type="text"
onfocusout="myFunction()">
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
onfocusout 이벤트는 요소가 포커스를 잃을 때 발생합니다.
팁: onfocusout 이벤트는 onblur 이벤트와 유사합니다. 주요 차이점은 onblur 이벤트가 버블링되지 않는다는 것입니다. 따라서 요소나 그 자식이 포커스를 잃는지 확인하려면 onfocusout 이벤트를 사용해야 합니다.
팁: onfocusout 이벤트는 onfocusin 이벤트의 반대입니다.
브라우저 지원
표의 숫자는 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Event | |||||
|---|---|---|---|---|---|
| onfocusout | Yes | Yes | 52.0 | Yes | Yes |
참고: onfocusout 이벤트 는 JavaScript HTML DOM 구문을 사용하는 Chrome, Safari 및 Opera 15+에서 예상대로 작동 하지 않을 수 있습니다 . 그러나 HTML 속성으로 작동해야 하며 addEventListener() 메서드를 사용해야 합니다(아래 구문 예제 참조).
통사론
HTML:
<element onfocusout="myScript">
JavaScript(Chrome, Safari 및 Opera 15+에서 예상대로 작동하지 않을 수 있음):
object.onfocusout = function(){myScript};
JavaScript에서 addEventListener() 메서드를 사용하여 다음을 수행합니다.
object.addEventListener("focusout", myScript);
참고: addEventListener () 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.
기술적 세부 사항
| 거품: | 네 |
|---|---|
| 취소 가능: | 아니 |
| 이벤트 유형: | 포커스 이벤트 |
| 지원되는 HTML 태그: | <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 및 <title>을 제외한 모든 HTML 요소 |
| DOM 버전: | 레벨 2 이벤트 |
더 많은 예
예시
"onfocusin"을 "onfocusout" 이벤트와 함께 사용:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
예시
이벤트 위임: addEventListener() 의 useCapture 매개변수를 true로 설정(포커스 및 블러용):
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
예시
이벤트 위임: focusin 이벤트 사용:
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>