onFocus Olayı (Event)

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

Kullanıcı Adı :
Şifre :

Elementler

focus olayının gerçekleşebileceği/kontrol edilebileceği HTML etiketleri/elementleri

İlgili Başlıklar