onfocusout 이벤트
정의와 사용법:
onfocusout 이벤트는 요소가 포커스를 잃을 준비 중에 발생합니다.
힌트: onfocusout 이벤트는 onblur 이벤트주요 차이점은 onblur 이벤트가 버블링하지 않는다는 것입니다. 따라서 요소나 자식 요소가 포커스를 잃는지 확인하려면 onfocusout 이벤트를 사용해야 합니다.
힌트:Firefox는 onfocusout 이벤트를 지원하지 않지만, addEventListener() 메서드의 선택적 useCapture 매개변수를 사용하여 onblur 이벤트의 캡처 리스너를 사용하여 요소의 자식 요소가 포커스를 잃는지 확인할 수 있습니다.
힌트: 푸시: onfocusin 이벤트onfocusout 이벤트는
반대로.
예제
예제 1
입력 필드가 포커스를 잃을 준비 중에 JavaScript를 실행합니다:
<input type="text" onfocusout="myFunction()">
페이지 하단에 더 많은 TIY 예제가 있습니다.
문법:
HTML에서:< element.addEventListener("focusout",onfocusout="
">
JavaScript에서 addEventListener() 메서드를 사용하여:JavaScript에서 (Chrome, Safari 및 Opera 15 이상에서 예상치 못한 결과가 나타날 수 있습니다):.addEventListener("focusout",.onfocusout = function(){
};
JavaScript에서 addEventListener() 메서드를 사용하여:object .addEventListener("focusout",myScript
주의사항:); Internet Explorer 8 이상 버전은 지원하지 않습니다addEventListener() 메서드:
。
| 기술 세부 사항: | 지원 |
|---|---|
| 버블링: | 취소 가능: |
| 지원되지 않음: | FocusEvent |
| 지원되는 HTML 태그: | 모든 HTML 요소는 다음 요소를 제외하고 있습니다：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 및 <title> |
| DOM 버전: | Level 2 Events |
브라우저 지원
표의 숫자는 이 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
| 이벤트 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusout | 지원 | 지원 | 52.0 | 지원 | 지원 |
주의사항:onfocusout 이벤트는 Chrome, Safari, Opera 15+에서 JavaScript HTML DOM 문법에서 예상치 못한 결과를 출력할 수 있습니다. 그러나, HTML 속성으로 사용하고 addEventListener() 메서드를 사용해야 합니다(아래의 문법 예제를 참조하세요).
더 많은 예제
예제 2
"onfocusin"와 "onfocusout" 이벤트를 함께 사용
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
예제 3
이벤트 위임: addEventListener()의 useCapture 매개변수를 true로 설정 (focus와 blur에 사용)
<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>
예제 4
이벤트 위임: 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>
