JAVASCRİPT 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.

1. HTML etiketine nitelik tanımlayarak olay kullanımı
2. addEventListener ile nesneye bağlararak olay kullanımı
3. 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ı

<etiket OLAYADI=”javascript kodu/kodları“>

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.

1 2 3

<button onclick="window.alert('Merhaba Dünya')">Uyarı Ver</button>

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.

1 2 3

<input type="text" onchange="window.alert('Yazı Değiştirildi')" value="Yazı">

 

this anahtarı ve fonksiyon kullanımı

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<input type="text" onchange="kontrol(this)" value=""> <script> function kontrol(nesne){ 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"); } } </script>

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<button onclick="kontrol()">Kontrol Et</button> <input id="sayi" type="text" value="">   <script>   function kontrol(){   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"); } }   </script>

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<button onclick="kontrol(document.getElementById('sayi'))">Kontrol Et</button> <input id="sayi" type="text" value="">   <script>   function kontrol(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"); } }   </script>

 

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ı:

1 2 3 4 5 6 7 8 9

<div id="test1">TIKLA</div>     <script> var nesne= document.getElementById("test1"); nesne.addEventListener("click",function(e){ alert("merhaba"); },false); </script>

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<input id="sayi" type="text" value=""> <script>   //id değeri sayi olan etiketi dom ağacından çekiyoruz. var sayi= document.getElementById('sayi');   //text içindekinin aksine onchange yerine on ifadeleri kullanılmamaktadır. sayi.addEventListener('change',kontrol,false);   function kontrol(){   //this anahtarı burada etkin olan nesneyi vermektedir. //this.value ile text kutusundaki değeri okuyoruz   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"); } }   </script>

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<button id="sayi-kontrol">Kontrol Et</button> <input id="sayi" type="text" value="">   <script>   //id değeri sayi ve sayi-konrol olan etiketi dom ağacından çekiyoruz. var sayiKontrol= document.getElementById('sayi-kontrol'); var sayi= document.getElementById('sayi');   //buton butona tıkladığımızda kontrol fonksiyonu çalışacak 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"); } }   </script>

 

Ö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.

1 2 3 4 5 6 7 8 9 10

<script> window.addEventListener('click',konumGoster,false);   function konumGoster(olay) { window.alert(olay.offsetX+"\n"+olay.offsetY); } </script>

 

Daha fazla örnek için JavaScript Örnekleri yazısını inceleyin.

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

1 2 3 4 5 6 7

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

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)

1 2 3 4 5 6 7 8 9 10

<script> function konumGoster(olay) { window.alert("pencerede bir yere tıklandı"); }   window.onclick=konumGoster; </script>

 

Ö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.

1 2 3 4 5 6 7 8 9 10

<script> function konumGoster(olay) { window.alert(olay.offsetX+"\n"+olay.offsetY); }   window.onclick=konumGoster; </script>

 

Ö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ı  </body> etiketinden hemen önce javascript kodlarını yazılmasıdır.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<input id="sayi" type="text" value=""> <script> /********Olaylar*****/ //id değeri sayi olan etiketi dom ağacından çekiyoruz. var sayi= document.getElementById('sayi'); sayi.onchange=kontrol;   function kontrol(){   //this anahtarı burada etkin olan nesneyi vermektedir. //this.value ile text kutusundaki değeri okuyoruz 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"); } } </script>

 

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

DEMO

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

<audio id="sarki" controls src="sarki.mp3"></audio> <div id="durum"></div> <button id="oynat">Oynat</button> <input type="range" id="ses" max=100 min=0 value=10>   <script>   var sarki=document.getElementById("sarki"); var durum=document.getElementById("durum"); var oynat=document.getElementById("oynat"); var ses=document.getElementById("ses");   //oynat butonuna basınca yapılacaklar oynat.onclick=function(){ if(sarki.paused) { sarki.play(); oynat.textContent="duraklat"; } else { sarki.pause(); oynat.textContent="oynat"; }   }   //ses ayarı için range nesnesi değiştirildiğinde yapılacaklar ses.oninput=function(){ sarki.volume =ses.value/100; }       //şarkı yürütülmeye başlandığında sarki.onplay=function(){ durum.innerHTML="Şarkı Başladı"; } //şarkı yürütülmeye başlandığında sarki.onpause=function(){ durum.innerHTML="Şarkı Duraklatıldı"; }   //controlden ses değiştirildiğinde range nesnesini güncelleme sarki.onvolumechange=function(){ ses.value=sarki.volume*100; }     </script>