Merhabalar, JavaScript’te düzenli ifadeler yazımızdan sonra JS’de olaylar konusunu anlatmaya çalışacağız. JavaScript olay yönelimli bir dil olduğundan bu konu çok önemlidir.
Olay(event) nedir ?
Genellikle kullanıcı tarafından yapılan bir eylemdir diyebiliriz. Örneğin mouse’a tıklanması, enter tuşuna basılması, sayfanın açılıp kapanması birer olaydır. Bir olay gerçekleştiğinde bir fonksiyonun devreye girmesini istiyorsak o elemana bir olay yönlendiricisi(event handler) ekleriz. Bir örnekle başlayıp JS’de mevcut olan olayları göstermeye çalışacağım.
<html>
<head>
<script type="text/javascript">
function olay(event) {
document.write(event.type+" "+event.button+" "+event.target.id+" "+event.timeStamp);
}
</script>
</head>
<body onclick="olay(event)">
<div id="ornek">Tikla!</div>
</body>
</html>
Yukarıdaki örnekte bir div elemanına onclick olay yönlendiricisi ile bir fonksiyon belirttik. Bu fonksiyon parametre olarak event nesnesini alıyor. Event nesnesinin ne olduğuna birazdan değineceğiz. onclick attribute’u, o elemana tıklandığında gerçekleşir. Dolayısıyla biz Tikla! yazısına tıkladığımız zaman olay fonksiyonu çalışıyor. Bu fonksiyon da görüldüğü gibi ekrana Tikladiniz! uyarısını veriyor.
Yukarıda bahsettiğimiz event nesnesi, olay gerçekleştiğinde fonksiyona parametre olarak giden, nesneye ait özellik ve metotlara sahip olan bir nesnedir. Event nesnesinin bazı özellikleri :
- type
Olayın türünü bulmamızı sağlar.
- target
Olayı hangi HTML elemanının gerçekleştirdiğini bulmamızı sağlar.
- timeStamp
Olayın oluştuğu zamanı milisaniye cinsinden geriye döndürür.
- button
Hangi mouse tuşuna basıldığını bulmamızı sağlar. Sol tuşa basılırsa 0, orta tuşa basılırsa 1, sağ tuşa basılırsa 2 değerini geriye döndürür.
Normalde event nesnesinin birçok özellik ve metotları mevcut. Ancak ben burada bizim kullanacağımız birkaç tanesini örnek olması amacıyla gösterdim.
Bu özelliklere ise daha önce gördüğümüz gibi event.ozellik şeklinde erişmemiz mümkündür.
Olaylar
onclick, onmousedown, onmouseover gibi olay yönlendiricileri birer olay değildir. Başına on eki getirilenler birer olay yönlendiricisidirler. Örneğin click olayı mouse’a tıklandığında gerçekleşir. onclick ise mouse’a tıklandığında gidilecek fonksiyonu belirtmek için kullanılır. Şimdi bu olay yönlendiricilerinin birkaçını gösterip örnek yapalım. Mouse Olayları
- onclick
Yukarıdaki örnekte yaptığımız gibi mouse’un sol tuşuna basıldığında meydena gelir.
- ondblclick
İsminden de anlaşılacağı gibi nesneye 2 kere tıklanıldığında meydana gelir.
- mousedown
Mouse’un bir tuşuna basıldığında meydana gelir. Onclick’ten farkı yalnız mouse’un sol tuşuna karşı hassas olmamasıdır.
- onmouseup
Mouse’un, basılan bir tuşunun bırakılması halinde meydana gelir.
- onmouseover
Mouse işaretçisini bir nesne üzerine getirdiğiniz zaman meydana gelir.
- onmousemove
Mouse işaretçisini bir nesne üzerinde gezdirdiğimiz zaman meydana gelir.
- onmouseout
Mouse işaretçisi bir nesne üzerinden çıktığında meydana gelir.
Klavye Olayları
- onkeydown
Klavyeden bir tuşa basıldığı zaman meydana gelie.
- onkeypress
Klavyeden bir tuşa basıldığı zaman meydana gelir.
- onkeyup
Klavyede basılı tutulan bir tuş bırakıldığı zaman meydana gelir.
Sayfa/nesne Olayları
- onload
Bir elementin yüklenmesi bittiğinde meydana gelir.
- onunload
Bir nesnenin yüklenmesi bittikten sonra kaldırılması onunload olayını tetikler.
- onerror
Bir nesne yüklenirken hata ile karşılaşıldığında meydana gelir.
Şimdi bu verdiğimiz olay yönlendiricileri ile ilgili örnek verelim.
<html>
<head>
<script type="text/javascript">
function olay(event) {
alert("tikladiniz!");
}
</script>
</head>
<body onmousemove="olay(event)">
<div id="ornek">Tikla!</div> <!-- mouse işaretçisi üzerine geldiğinde fonksiyon çalıştırılır.-->
</body>
</html>
Yukarıdaki örnek için gereken açıklamayı kod içerisinde yaptım.
<html>
<head>
<script type="text/javascript">
var a=0;
function olay(event) {
event.target.innerHTML=a; //event.target bize element nesnesini veriyor. element.innerHTML ile de bir HTML elemanının içeriğini değiştirebiliyoruz.
a++;
}
</script>
</head>
<body >
<div id="ornek" onmousemove="olay(event)">ss
</div>
</body>
</html>
Bu örnekte de yukarıdaki gibi event.target’ın bir özelliğini kullandık. Bu da tahmin edeceğiniz gibi event.target ile ulaşmış olduğumuz HTML elemanının içeriğini değiştirmemize olanak sağlıyor.
<html>
<head>
<script type="text/javascript">
var a=0;
function olay(event) {
document.getElementById("ornek").innerHTML="Sayfa yuklendiginde degisecek.";
}
</script>
</head>
<body onload="olay(event)">
<div id="ornek">Sayfa yüklenmeden değişmez.
</div>
</body>
</html>
document.getElementById’yi daha önce görmüştük. Id’si ornek olan elemana erişmemize olanak sağlıyor. Bunun da içeriğini innerHTML ile değiştiriyoruz.
Bu dersimizde genel olarak event nesnesinden ve olayların işleniş mantığından bahsetmeye çalıştım. Aslında çok fazla olay var ancak buraya hepsini yazmak çok zor. İsterseniz bu adresten hepsine göz atabilirsiniz. Bir sonraki dersimizde görüşmek dileğiyle..