onblur Olay
Örnek
Bir kullanıcı bir giriş alanından ayrıldığında bir JavaScript yürütün:
<input type="text" onblur="myFunction()">
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Onblur olayı, bir nesne odağı kaybettiğinde meydana gelir.
onblur olayı çoğunlukla form doğrulama koduyla birlikte kullanılır (örneğin, kullanıcı bir form alanından ayrıldığında).
İpucu: onblur olayı, onfocus olayının tersidir .
İpucu: onblur olayı, onfocusout 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ı kullanabilirsiniz. Ancak, onblur olayı için addEventListener() yönteminin isteğe bağlı useCapture parametresini kullanarak bunu başarabilirsiniz .
Tarayıcı Desteği
Event | |||||
---|---|---|---|---|---|
onblur | Yes | Yes | Yes | Yes | Yes |
Sözdizimi
HTML'de:
<element onblur="myScript">
JavaScript'te:
object.onblur = function(){myScript};
JavaScript'te, addEventListener() yöntemini kullanarak:
object.addEventListener("blur", myScript);
Not: addEventListener () yöntemi, Internet Explorer 8 ve önceki sürümlerde desteklenmez.
Teknik detaylar
kabarcıklar: | Numara |
---|---|
İ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
"onblur"u "onfocus" olayıyla birlikte kullanmak:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Örnek
Olay delegasyonu: addEventListener() öğesinin useCapture parametresini true olarak ayarlama:
<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 (Firefox tarafından desteklenmez):
<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>