JavaScript onFocus olayı (event), ilgili elementin içine girilerek odaklanıldığı (focus) zaman tetiklenir. HTML onFocus özelliği element üzerinde focus olayı gerçekleştiği zaman çalıştırılacak fonksiyonun veya betiğin (script) belirtilmesini sağlar.
HTML dahilindeki sadece tek bir fonksiyon belirtilebilen bu tip olay yönetim fonksiyonlarına olay tutucu (event handler) ismi verilir. Fakat, HTML DOM'da birden fazla olay yönetim fonksiyonu belirtilebildiği için olay tutucusu isminden ziyade olay dinleyici (event listener) ismi kullanılmaktadır. DOM'da olay dinleyici fonksiyonlar attachEvent ve addEventListener fonksiyonları ile ilgili elemente eklenebilir/bağlanabilir.
HTML Sözdizimi
<element onfocus="betik" > ... </element>
DOM Sözdizimi
element.onfocus = fonkBetik;
betik = element.onfocus
| betik | onfocus olayı tetiklendiğinde çalıştırılacak betik (script) kodlarını belirtir. |
| fonkBetik | onfocus olayı tetiklendiğinde çalıştırılacak fonksiyon adını veya betik kodlarını belirtir. |
Dönüş Değeri
| betik | Fonksiyon belirtildiyse fonksiyon gövdesi veya betik kodları döner. |
Örnek
Aşağıdaki örnek, JavaScript onFocus olay tutucu kullanarak form kontrollerine odaklanıldığı (focus) zaman ilgili kontrol ile ilgili kısa açıklama gösterilmesini göstermektedir.
<html>
<head>
<title>JavaScript onFocus Olay tutucu örneği</title>
<script type="text/javascript">
var AdBilgi = "Kullanıcı adınızı giriniz";
var SifreBilgi = "Şifrenizi giriniz. <br/> Lütfen şifrenizi kimseye göstermeyin.";
var GonderBilgi = "Giriş bilgilerini göndermek için butona basınız.";
function AdFocus() {
document.getElementById('BilgiKutu').innerHTML = AdBilgi; }
function SifreFocus() {
document.getElementById('BilgiKutu').innerHTML = SifreBilgi; }
function GonderFocus() {
document.getElementById('BilgiKutu').innerHTML = GonderBilgi; }
function Gonder() {
alert('Bilgiler gönderildi!'); }
</script>
</head>
<body>
<table>
<tr><td style="text-align:right;">Kullanıcı Adı :</td>
<td><input id="AdGiris" onFocus="AdFocus()" type="text"></td>
</tr>
<tr><td style="text-align:right;">Şifre : </td>
<td><input id="SifreGiris" onFocus="SifreFocus()" type="text"></td>
</tr>
<tr><td></td>
<td style="text-align:right;"><input type="button" value="Giriş" onFocus="GonderFocus()" onClick="Gonder()">
</td></tr>
</table>
<div id="BilgiKutu" style="color:red;"> </div>
</body>
</html>
Test Edin
Elementler
focus olayının gerçekleşebileceği/kontrol edilebileceği HTML etiketleri/elementleri
A (Anchor) | AREA | BUTTON | INPUT | INPUT-hidden | INPUT-text | INPUT-password | INPUT-checkbox | INPUT-radio | INPUT-submit | INPUT-reset | INPUT-file | INPUT-image | INPUT-button | LABEL | MARQUEE | OPTGROUP | OPTION | SELECT | TEXTAREA