Daha önceki Olaylar sayfasında, üzerine kod yazacağımız olayları görmüştük:
Â
Â
Â
Â
Â
Â
| onclick |
Fareyle tıklamayı ifade eder. |
| ondblclick |
Fareyle çift tıklamayı ifade eder. |
| onmouseover |
Farenin imleciyle üzerine gelmeyi ifade eder. |
| onmouseout |
Farenin imlecini üzerinden çekmeyi ifade eder. |
| onmousedown |
Fare düğmesine basmayı ifade eder. |
| onmouseup |
Fare düğmesini bırakmayı ifade eder. |
| onload |
Sayfanın yüklenmesini ifade eder. |
| onunload |
Sayfanın kapatılmasını ifade eder. |
| onchange |
Form aracının değişmesini ifade eder. |
| onsubmit |
Form bilgilerinin gönderilmesini ifade eder. |
| onreset |
Form bilgilerinin silinmesini ifade eder. |
| onselect |
Form aracının seçilmesini ifade eder. |
| onblur |
Form aracının pasif hale geçmesini ifade eder. |
| onfocus |
Form aracının aktif hale geçmesini ifade eder. |
| accesskey |
Ä°stenen karakterin girilmesini ifade eder. |
| tabindex |
Nesnelerin işlem sıralamasını numaralandırır. |
| onkeydown |
Tuşun basılmasını ifade eder. |
| onkeyup |
Tuşun salınmasını ifade eder. |
| onfocus |
Tuşun basılıp salınmasını ifade eder. |
Â
Bu olaylar yaratıcı web tasarımcılar için yeterli değildir. Başka olaylar oluşturmak için event (olay) komutlarından yararlanılır. Olay komutlarının önüne event. kodu getirilir. Önemli Not: Bu komutlar sadece IE gözatıcıları tarafından desteklenmektedir.
Sağ Tıklama, Sol Tıklama
Fareyle sağ tıklanıldığında, bir fonksiyon çağırmak için button (düğme) olay komutu kullanılır. event.button şeklinde yazılır ve sol tıklanırsa 1, sağ tıklanırsa 2 değerini alır.
Â
<html>
<head>
<title>Sağ ve sol tıklama,</title>
<script language=”JavaScript”>
function tikla()
{
if (event.button==1) yazi.innerHTML=”Sol tıkladınız…”
if (event.button==2) yazi.innerHTML=”SaÄŸ tıkladınız…”
}
</script>
</head>
<body onmousedown=”tikla()”>
<a id=”yazi”>Fareyle sayfanın üzerine tıklayınız.</a>
</body>
</html>Â
Â
İmlecin Koordinatları
Â
Â
İmlecin sayfadaki konumuna göre kod yazmak isteyebiliriz. İmlecin hangi yatay ve düşey koordinatlarda olduğunu belirlemek için clientX, clientY veya offsetX, offsetY veya x, y olay komutlarından yararlanılır. Kısa bir uygulama yapalım:
Â
<html>
<head>
<title>Pencere koordinatları,</title>
<script language=”JavaScript”>
function imlec()
{
var a=event.x
var b=event.y
yazi.innerHTML=”Pencere Koordinatları = (” + a + “;” + b + “)”
}
</script>
</head>
<body onclick=”imlec()”>
<h3 id=”yazi”>Fareyle sayfanın üzerine tıklayınız.</h3>
</body>
</html>Â
Â
Verdiğimiz diğer kodları da siz deneyin, aynı sonuca ulaşacaksınız. Bu kodların hepsi imlecin, pencerenin sol üst köşesine olan yatay ve düşey mesafeyi piksel cinsinden vermektedir. Eğer pencerenin değil de ekranın sol üst köşesine olan yatay ve düşey mesafeyi edinmek istiyorsak, screenX, screenY komutlarını kullanırız.
<html>
<head>
<title>Ekran koordinatları,</title>
<script language=”JavaScript”>
function imlec()
{
var a=event.screenX
var b=event.screenY
yazi.innerHTML=”Ekran Koordinatları = (” + a + “;” + b + “)”
}
</script>
</head>
<body onclick=”imlec()”>
<h3 id=”yazi”>Fareyle sayfanın üzerine tıklayınız.</h3>
</body>
</html>Â
Â
Tuş Fare Kombinasyonları
Â
Â
Â
GeliÅŸmiÅŸ programlarda (MS Office, Adobe Photoshop vb.) tıklamak ile shift‘e basarak tıklamak arasında fark vardır. EÄŸer bu farkı web sayfalarınıza taşımak istiyorsanız event.shiftKey olay komutunu kullanabilirsiniz. Bu komut shift tuÅŸuna basılıp, basılmadığını gösterir; eÄŸer onclick durumunda event.shiftkey kodu kullanırsanız, kullanıcının tıkladığında shift‘e basıp basmadığını kontrol etmiÅŸ olursunuz. Aynı ÅŸekilde bu kodu onmouseover durumunda kullandığınızda, fareyle nesnenin üzerine gelindiÄŸinde shift‘e basılıp, basılmadığını kontrol etmiÅŸ oluruz. Bu çeÅŸit fare tuÅŸ kombinasyonları türetebiliriz.
Â
Â
<html>
<head>
<title>Tuş fare kombinasyonları,</title>
<style>
table {visibility:hidden} </style>
<script language=”JavaScript”>
function rubai()
{
if (event.shiftKey==0)
{
hayyam.style.visibility=”visible”
yazi.innerHTML=”Ey kör! Bu yer, bu gök, bu yıldızlar boÅŸtur boÅŸ!<br>Bırak onu bunu da gönlünü hoÅŸ tut hoÅŸ!<br>Åžu durmadan kurulup dağılan evrende<br>Bir nefestir alacağın, o da boÅŸtur boÅŸ!”
}
else
{
var yenisayfa = window.open(“”, “Yeni_Sayfa”, “toolbar=no,location=no,directories=no, status=no, menubar=no,scrollbars=no, resizable=no,copyhistory=no,width=400, height=120″)Â
yenisayfa.document.write(“Ey kör! Bu yer, bu gök, bu yıldızlar boÅŸtur boÅŸ!<br>Bırak onu bunu da gönlünü hoÅŸ tut hoÅŸ!<br>Åžu durmadan kurulup dağılan evrende<br>Bir nefestir alacağın, o da boÅŸtur boÅŸ!”)
}
}
</script>
</head>
<body>
<form>
<p>Düğmeye normal tıklamakla, <b>Shift</b>’e basarak tıklamak arasında fark var.</p>
<input type=”button” value=”Ömer Hayyam” onclick=”rubai()”>
</form>
<center><table id=”hayyam” cellpadding=”5″ cellspacing=”0″ border=”0″ width=”400″ bgcolor=”#D0BB82″>
<tr><td id=”yazi”>Rubai</td></tr></table></center>
</body>
</html>Â
Bu uygulamamızda onclick olayında event.shiftKey kodu kullandık, böylece fare ile shift tuÅŸunun beraber basılmasına kod yazdık. event.shiftKey‘e 1/0 gibi true/false deÄŸerleri verebiliriz. Benzer ÅŸekilde Alt veCtrl tuÅŸları için ÅŸu olay kodlarını kullanabilirsiniz: altKey, ctrlKey.
Yorumlar
Yorum Yok
Yorumunuzu Ekleyin
Yorum eklemek için giris yapmalısınız.