onblur 이벤트

DOM 이벤트 FocusEvent

정의와 사용법

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

onblur 이벤트는 가장 자주 양식��확인 코드와 함께 사용됩니다(예를 들어, 사용자가 양식 필드를 떠났을 때).

참고: onblur 이벤트와 onfocus 이벤트반대로.

참고: onblur 이벤트는 onfocusout 이벤트。주요 차이점은 onblur 이벤트가 퍼지지 않는다는 점입니다. 따라서 요소나 그 자식 요소가 포커스를 잃었는지 확인하려면 onfocusout 이벤트를 사용할 수 있습니다. 그러나 onblur 이벤트를 사용하여 addEventListener() 메서드의 useCapture 매개변수(선택 사항)로 이를 구현할 수 있습니다.

예제

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

<input type="text" onblur="myFunction()">

직접 테스트해 보세요

페이지 하단에 더 많은 TIY 예제가 있습니다.

문법

HTML에서:

<element onblur="myScript">

직접 테스트해 보세요

제이쿼리에서:

object.onblur = function(){}myScript};

직접 테스트해 보세요

JavaScript에서 addEventListener() 메서드를 사용하여:

object.addEventListener("blur", 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
onblur 지원 지원 지원 지원 지원

더 많은 예제

예제

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

<input type="text" onfocus="focusFunction()" onblur="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 이벤트 사용 (Firefox가 지원하지 않음):

<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>

직접 테스트해 보세요

DOM 이벤트 FocusEvent