최신 웹 개발 튜토리얼
 

에 onblur 이벤트

<이벤트 객체

예

사용자가 입력 필드를 떠날 때 자바 스크립트를 실행합니다 :

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

더 "Try it Yourself" 아래의 예.

정의 및 사용

객체가 포커스를 잃었을 때에 onblur 이벤트가 발생합니다.

에 onblur 이벤트가 가장 많이 양식 유효성 검사 코드와 함께 사용됩니다 (예를 들어, 사용자가 양식 필드를 떠날 때).

Tip: 에 onblur 이벤트가 반대입니다 onfocus 및의 이벤트입니다.

팁 : 위해 onblur 이벤트가 유사하다 onfocusout 이벤트입니다. 주요 차이점은에 onblur 이벤트가 버블을하지 않는다는 것입니다. 당신이 요소 또는 자식이 포커스를 잃을 여부를 알아하려는 경우 따라서, 당신은 onfocusout 이벤트를 사용할 수 있습니다. 그러나의 선택 useCapture를 매개 변수를 사용하여이를 달성 할 수있다 addEventListener() 에 onblur 이벤트에 대한 방법을.

브라우저 지원

행사
onblur 예 예 예 예 예

통사론

HTML에서 :

< »그것을 자신을 시도

자바 스크립트에서 :

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

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

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

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

기술적 세부 사항

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

더 예

예

사용 "onblur" 와 함께를 "onfocus" 이벤트 :

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

예

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