onfocusout Olay
Örnek
Bir giriş alanı odağını kaybetmek üzereyken bir JavaScript yürütün:
<input type="text"
onfocusout="myFunction()">
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Onfocusout olayı, bir öğe odağını kaybetmek üzereyken meydana gelir.
İpucu: onfocusout olayı, onblur olayına benzer . Temel fark, onblur olayının balonlanmamasıdır. Bu nedenle, bir öğenin veya alt öğesinin odağını kaybedip kaybetmediğini öğrenmek istiyorsanız, onfocusout olayını kullanmalısınız.
İpucu: onfocusout olayı, onfocusin olayının tersidir .
Tarayıcı Desteği
Tablodaki sayılar, olayı tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Event | |||||
|---|---|---|---|---|---|
| onfocusout | Yes | Yes | 52.0 | Yes | Yes |
Not: onfocusout olayı , JavaScript HTML DOM sözdizimi kullanılarak Chrome, Safari ve Opera 15+ sürümlerinde beklendiği gibi çalışmayabilir. Ancak, bir HTML niteliği olarak ve addEventListener() yöntemini kullanarak çalışmalıdır (Aşağıdaki sözdizimi örneklerine bakın).
Sözdizimi
HTML'de:
<element onfocusout="myScript">
JavaScript'te (Chrome, Safari ve Opera 15+'te beklendiği gibi çalışmayabilir):
object.onfocusout = function(){myScript};
JavaScript'te, addEventListener() yöntemini kullanarak:
object.addEventListener("focusout", myScript);
Not: addEventListener () yöntemi, Internet Explorer 8 ve önceki sürümlerde desteklenmez.
Teknik detaylar
| kabarcıklar: | Evet |
|---|---|
| İptal edilebilir: | Numara |
| Etkinlik tipi: | FocusEtkinlik |
| Desteklenen HTML etiketleri: | TÜM HTML öğeleri, HARİÇ: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> ve <title> |
| DOM Sürümü: | 2. Seviye Etkinlikleri |
Daha fazla örnek
Örnek
"onfocusin" ile "onfocusout" olayının birlikte kullanılması:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Örnek
Olay delegasyonu: addEventListener() öğesinin useCapture parametresini true olarak ayarlama (odak ve bulanıklık için):
<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>
Örnek
Etkinlik delegasyonu: focusin olayını kullanma:
<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>