JavaScript Olaylar

Olaylar, HTML nesnelerinin kullanıcı(fare,klavye yada dokunma) yada Web Apileri(video bitmesi, duraklatılması vs.) ile etkileşimi sonucu meydana gelen değişimlerdir. DOM ile gerçekleşen olaylara JavaScript kullanarak fonksiyon atamak mümkündür.

Bu yazıda DOM nesnelerinin olaylarına javascript fonksiyon atandığını örneklerle açıklayacağız.

JavaScript ile 3 şekilde HTML nesnelerine olay atamak mümkün.

HTML etiketine nitelik tanımlayarak olay kullanımı
addEventListener ile nesneye bağlararak olay kullanımı
Nesneneye özellik olarak olayın kullanımı

1.HTML Etiket İçinde Olay Kullanımı

En eski kullanılan yöntemdir. Tavsiye etmemekle birlikte internet ortamında verilen örneklerin çoğu bu şekilde yapılmıştır. Sayfanın sonunda tüm DOM olay listesi mevcuttur.

Kullanımı

Mantık aslında şu şekildedir.  Tırnaklar arasında yazılan javascript kodu, kırmızı ile belirtilen olay gerçekleştiğinde çalıştırılır.

Not: Çift tırnak içinde tek tırnak metinsel olarak algılanır. Tam tersi durum tek tırnak içinde geçerlidir.

Örnek: Butona tıklayınca  ekran uyarı merhaba dünya yazalım.

onclick: tıklama gerçekleştiğinde  window.alert(‘Merhaba Dünya’) javascript kodunu çalıştır.

Örnek: Input kutusundaki yazı değiştiğinde ekrana uyarı verdiren kodu yazalım.  Bunun için onchange olayını kullanacağız.

fonksiyon kullanımı: Genellikle olay gerçekleştiğinde bir fonksiyon çalıştırılır.

this: Olayın gerçekleştiği nesneyi fonksiyona parametre olarak gönderir.

Örnek: Yazı kutusuna girilen  sayı tek mi çift mi olduğunu yazdıran kodu hazırlayalım. Bu sefer ki örnek satır içinde yazılmayacak kadar uzun olsun. Bu yüzden bir tane fonksiyon tanımlayıp fonksiyon içinde şartları yaptırmak daha mantıklı olacaktır.

if(nesne.value%2==0)
 {
 alert(nesne.value+" sayısı çifttir");
 }
 else if(nesne.value%2==1)
 {
 alert(nesne.value+" sayısı tektir");
 }
 else
 {
 alert(nesne.value+" sayısı değildir");
 }

}

Ne yazdığımızı inceleyelim. onchange niteliği olay gerçekleştiğinde kontrol fonksiyonunu çalıştırıyor. kontrol fonksiyonuna this ile etkin olan nesneyi(input nesnesi) gönderiyoruz. Kontrol fonksiyonunun tanımlandığı yerde gelen ismiyle this anahtarını karşılayıp gerekli şart işlemini gerçekleştiriyoruz.

Örnek: Yukarıdaki örneği bir butona bağlayarak yapalım. Bu sefer etkin olan nesne buton olacağı için this anahtarı ile  ancak butonu göndermiş olacağız. Text nesnesi için document.getElementById kullanmamız gerekecek. Bunun için nesneye bir tane id ataması yapıyoruz.

var sayi=document.getElementById('sayi');

if(sayi.value%2==0)
{
alert(sayi.value+" sayısı çifttir");
}
else if(sayi.value%2==1)
{
alert(sayi.value+" sayısı tektir");
}
else
{
alert(sayi.value+" sayısı değildir");
}
}

Yada örnek şu şekilde daha genel hale getirilebilir. kontrol fonksiyonuna sayi nesnesini ( document.getElementById(‘sayi’) ile çekip ) gönderiyoruz.

if(sayi.value%2==0)
{
alert(sayi.value+" sayısı çifttir");
}
else if(sayi.value%2==1)
{
alert(sayi.value+" sayısı tektir");
}
else
{
alert(sayi.value+" sayısı değildir");
}
}

2. addEventListener ile nesneye olay atayarak kullanma

addEventListener konusunu sitede daha önce anlatmıştım. O yazıdan konuyu anlatan bir kaç alıntı yaparak olay kullanımını açıklayalım.

Kullanımı:

element.addEventListener(olay,fonksiyon,kabarcıklanma);

olay: dinlenecek etikete ait olan hareketlilik. örn: click,mouseover,keypress, cut,scroll,dragenter vs. tüm olay listesine ulaşmak için tıklayın.

fonksiyon :dinlenen olay gerçekleştiğinde çalıştırılacak olan metod adı yada anonim fonksiyon

kabarcıklanma: içi içe olan etiketlerin her birinde olay tanımlanmışsa baştan sonra doğru olayları çalıştırıp çalıştırmyacağı.(true/false alır)

Basit kullanımı:

var nesne= document.getElementById("test1");
nesne.addEventListener("click",function(e){ alert("merhaba"); },false);

test1 nesnesine tıklandığında anonim bir fonksiyon tetikleniyor.

Örnek:Yazı kutusuna girilen  sayı tek mi çift mi olduğunu yazdıran kodu hazırlayalım. Yukarıdaki örneği addEventListener kullanarak hazırlıyoruz.

Bu örnekte yapılmadı ama olay atanan fonksiyonlara olay ile ilgili parametre geçilebilmektedir.

sayi.addEventListener('change',kontrol,false);

function kontrol(){

if(this.value%2==0)
{
alert(this.value+" sayısı çifttir");
}
else if(this.value%2==1)
{
alert(this.value+" sayısı tektir");
}
else
{
alert(this.value+" sayısı değildir");
}
}

Yukarıdaki kodda ne oldu, inceleyelim.6. satırda id değeri  sayi olan HTML etiketini javascript nesnesi olarak seçtik.  9. satırda bu nesneye addEventlistener ile change(değer değiştiğinde) olayı ile kontrol fonksiyonunu bağladık.  11-28. satırlar kontrol fonksiyonuna ait olan bölüm. kontrol fonksiyonunda dikkat edilmesi gereken en önemli husus, this anahtarı ile text kutusundaki değişimin kontrol edildiğini bilmektir.  text kutularındaki tüm değerler value niteliğinde tutulmaktadır. this.value ile text kutusuna girilen değeri okuyup şart ile işleme tabi tuttuk.

Örnek:Yukarıdaki örneği bir butona bağlayarak yapalım.  Aradaki kullanım farklılığını görmek için aynı örnekleri farklı tekniklerle yapıyorum.

Bu örnekte yapılmadı ama olay atanan fonksiyonlara olay ile ilgili parametre geçilebilmektedir.

var sayi= document.getElementById('sayi');

sayiKontrol.addEventListener('click',kontrol,false);

function kontrol(){
if(sayi.value%2==0)
{
alert(sayi.value+" sayısı çifttir");
}
else if(sayi.value%2==1)
{
alert(sayi.value+" sayısı tektir");
}
else
{
alert(sayi.value+" sayısı değildir");
}
}

Örnek:  pencere üzerinde tıklanan konumu gösterin. Olaya atanan parametreyi göstermek için hazırlanmış bir örnektir. olay parametresi gerçekleşen olaya ait bilgileri göndermektedir. Tıklama olayında farenin nesne üzerinde hangi konuma tıkladığını vermektedir. offsetX yatayda, offsetY dikeyde bulunan konumu göstermektedir.

window.addEventListener('click',konumGoster,false);

function konumGoster(olay)
{
window.alert(olay.offsetX+"\n"+olay.offsetY);
}

3. Nesne Özelliği Olarak Olay Kullanımı

Yazdığım javascript uygulamalarında sıklıkla tercih ettiğim yöntemdir.  JavaScript kodu ile HTML etiketlerini bir birinden ayırmak için kullanılabilecek en iyi olay tanımlama tekniğidir. Nesnenin olay özelliklerini kullanarak daha temiz bir şekilde programlama yapma imkanı sunmaktadır.

Kullanımı

Nesne oluşturulduktan sonra, nesnenin olaylarına bir fonksiyon yada anonim bir fonksiyon bağlanarak olay ataması yapılır. Nesne üzerinden olay kaldırılacaksa tanımlanan özelliğe null değeri geçirilerek olay kaldırılabilir.

Örnek: Pencerede herhangi bir alana tıklama örneği

window.onclick=function(olay){
window.alert("her hangi bir alana tıklandı");
}

Window(Pencere) nesnesinin onclick özelliğine anonim bir fonksiyon bağlandı. Pencere üzerinde her hangi bir yere tıklandığında bu fonksiyondaki kodlar yürütülecektir.

Örnek: Pencerede herhangi bir alana tıklama örneği (Fonksiyon bağlanarak da yapılabilecek bir yöntem)

function konumGoster(olay)
{
window.alert("pencerede bir yere tıklandı");
}

window.onclick=konumGoster;

Örnek: Bir nesneye olay ile ilgili bir fonksiyon bağlandığında, fonksiyonu çalıştırılırken olay ile ilgili bilgiler parametre olarak geçilebilir. Bu örnekte fonksiyona olay parametresi geçilmiş ve tıklanan yerin komunu gösterilmektedir.

function konumGoster(olay)
{
window.alert(olay.offsetX+"\n"+olay.offsetY);
}

window.onclick=konumGoster;

Örnek:Yazı kutusuna girilen  sayı tek mi çift mi olduğunu yazdıran kodu hazırlayalım. İlk iki kavramdan açıkladığımıza benzer bir şekilde özelliklere bağlayarak da yapmak mümkün.

NOT:Nesne HTML etiketi yüklendikten sonra oluşturulmalıdır. Bunun için çeşitli yöntemler var fakat en basit olanı  etiketinden hemen önce javascript kodlarını yazılmasıdır.

sayi.onchange=kontrol;

function kontrol(){

if(this.value%2==0)
{
alert(this.value+" sayısı çifttir");
}
else if(this.value%2==1)
{
alert(this.value+" sayısı tektir");
}
else
{
alert(this.value+" sayısı değildir");
}
}

Api Olaylarını Kontrol Etme

Fare ve klavye olayları ile ilgili çok sayıda örneği bulmak mümkün. Bu bölümde medya nesnelerine ait olayları nasıl yöneteceğimizi inceleyeceğiz.

Örnek: sarki.mp3 dosyasını oynatama, durdurma ve ses ayarını değiştirme örneği