온블러 이벤트
예시
사용자가 입력 필드를 떠날 때 JavaScript를 실행합니다.
<input type="text" onblur="myFunction()">
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
onblur 이벤트는 개체가 초점을 잃을 때 발생합니다.
onblur 이벤트는 양식 유효성 검사 코드와 함께 가장 자주 사용됩니다(예: 사용자가 양식 필드를 떠날 때).
팁: onblur 이벤트는 onfocus 이벤트의 반대입니다.
팁: onblur 이벤트는 onfocusout 이벤트와 유사합니다. 주요 차이점은 onblur 이벤트가 버블링되지 않는다는 것입니다. 따라서 요소나 그 자식이 포커스를 잃는지 확인하려면 onfocusout 이벤트를 사용할 수 있습니다. 그러나 onblur 이벤트에 대해 addEventListener() 메서드의 선택적 useCapture 매개변수를 사용하여 이를 달성할 수 있습니다 .
브라우저 지원
| Event | |||||
|---|---|---|---|---|---|
| onblur | Yes | Yes | Yes | Yes | Yes |
통사론
HTML:
<element onblur="myScript">
자바스크립트:
object.onblur = function(){myScript};
JavaScript에서 addEventListener() 메서드를 사용하여 다음을 수행합니다.
object.addEventListener("blur", myScript);
참고: addEventListener () 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.
기술적 세부 사항
| 거품: | 아니 |
|---|---|
| 취소 가능: | 아니 |
| 이벤트 유형: | 포커스 이벤트 |
| 지원되는 HTML 태그: | <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 및 <title>을 제외한 모든 HTML 요소 |
| DOM 버전: | 레벨 2 이벤트 |
더 많은 예
예시
"onfocus" 이벤트와 함께 "onblur" 사용:
<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>