최신 웹 개발 튜토리얼
 

onfocusout 이벤트

<이벤트 객체

예

입력 필드에 포커스를 잃게 때 자바 스크립트를 실행합니다 :

<input type="text" onfocusout="myFunction()">
»그것을 자신을 시도

더 "Try it Yourself" 아래의 예.

정의 및 사용

요소가 포커스를 잃게 때 onfocusout 이벤트가 발생합니다.

팁 : onfocusout 이벤트가 유사하다 에 onblur 이벤트입니다. 주요 차이점은에 onblur 이벤트가 버블을하지 않는다는 것입니다. 당신이 요소 또는 자식이 포커스를 잃을 여부를 알아하려는 경우 따라서, 당신은 onfocusout 이벤트를 사용해야합니다.

팁 : 파이어 폭스가 onfocusout 이벤트를 지원하지 않지만, 당신은 요소의 자식이에 대한 캡처 리스너를 사용하여 초점을 맞출 여부를 상실 여부를 확인할 수 있습니다 위해 onblur (의 옵션 useCapture를 매개 변수를 사용하여 이벤트 addEventListener() 메소드).

Tip: onfocusout 이벤트가 반대입니다 onfocusin 이벤트입니다.

브라우저 지원

행사
onfocusout 예 예 지원되지 않음 예 예

참고 : 자바 스크립트 HTML DOM 구문을 사용하여 크롬, 사파리와 오페라 15 이상에서 예상대로 onfocusout 이벤트가 작동하지 않을 수 있습니다. 그러나, 그것은 HTML 속성으로하여 사용하여 작동해야 addEventListener() 방법.

통사론

HTML에서 :

< »그것을 자신을 시도

자바 스크립트에서 (may not work as expected in Chrome, Safari and Opera 15+) :

object .onfocusout=function(){ »그것을 자신을 시도

자바 스크립트는 사용 addEventListener() 메서드를 :

object .addEventListener("focusout", myScript );
»그것을 자신을 시도

참고 : addEventListener() 메서드는 인터넷 익스플로러 8 이전 버전에서는 지원되지 않습니다.

기술적 세부 사항

거품 : 예
취소 가능 : 아니
이벤트 유형: 의 FocusEvent
지원되는 HTML 태그 : <기본>, <BDO>로 <br>, <머리>, <HTML>, <iframe을>, <메타>, <PARAM>, <스크립트>, <스타일>, 그리고 : 제외한 모든 HTML 요소, <title>
DOM 버전 : 레벨 2 이벤트
예

더 예

예

사용 "onfocusin" 과 함께 "onfocusout" 이벤트 :

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
»그것을 자신을 시도

예

이벤트 위임 :의 useCapture를 매개 변수를 설정 addEventListener() true로를 (for focus and 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>
»그것을 자신을 시도

예

이벤트 위임 : (파이어 폭스에서 지원되지 않음) 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>
»그것을 자신을 시도
<이벤트 객체