Kurs önerileri:
onfocusout olayı
Tanım ve kullanım
Firefox, onfocusout olayını desteklemese de, elemanın alt elemanlarının odak kaybettiğini anlamak için onblur olayının yakalama dinleyicisini kullanabilirsiniz (addEventListener() yönteminin seçmeli useCapture parametresi). onfocusout olayı, bir elementin odak kaybedeceği sırada gerçekleşir. onblur olayıonfocusout olayı benzerdir
Firefox, onfocusout olayını desteklemese de, elemanın alt elemanlarının odak kaybettiğini anlamak için onblur olayının yakalama dinleyicisini kullanabilirsiniz (addEventListener() yönteminin seçmeli useCapture parametresi).. onblur olayı balonlamaz. Bu nedenle, bir eleman veya alt elemanın odak kaybettiğini belirlemek için onfocusout olayını kullanmalısınız.
Firefox, onfocusout olayını desteklemese de, elemanın alt elemanlarının odak kaybettiğini anlamak için onblur olayının yakalama dinleyicisini kullanabilirsiniz (addEventListener() yönteminin seçmeli useCapture parametresi). İpucu: onfocusin olayıonfocusout olayı ile
Tam tersi.
Örnek
Örnek 1
Giriş alanı kaybetmeden önce JavaScript çalıştırılır:
<input type="text" onfocusout="myFunction()">
Sayfa altında daha fazla TIY örneği bulunmaktadır.
Gramer
HTML'de:< element.addEventListener("focusout",onfocusout="
">
JavaScript'te, addEventListener() yöntemini kullanarak:In JavaScript (Chrome, Safari ve Opera 15+'te beklenmedik şekilde çalışmayabilir):.addEventListener("focusout",.onfocusout = function(){
};
JavaScript'te, addEventListener() yöntemini kullanarak:object .addEventListener("focusout",myScript
注释：); Internet Explorer 8 veya daha eski sürümler desteklemiyoraddEventListener() yöntemi
.
| Teknik ayrıntılar | 支持 |
|---|---|
| Balonlama: | İptal edilebilir: |
| Desteklenmiyor | FocusEvent |
| Desteklenen HTML etiketleri: | Tüm HTML elemanları, aşağıdaki elemanlardan başkası:<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> ve <title> |
| DOM 版本： | Level 2 Events |
浏览器支持
表中的数字注明了完全支持该事件的首个浏览器版本。
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusout | 支持 | 支持 | 52.0 | 支持 | 支持 |
注释：onfocusout 事件在使用 JavaScript HTML DOM 语法的 Chrome、Safari 和 Opera 15+ 中可能无法按预期工作。但是，它应该作为 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>
