myNotlar Logo

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
betikonfocus olayı tetiklendiğinde çalıştırılacak betik (script) kodlarını belirtir.
fonkBetikonfocus olayı tetiklendiğinde çalıştırılacak fonksiyon adını veya betik kodlarını belirtir.

Dönüş Değeri

betikFonksiyon 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

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

İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |