Pazartesi , 20 Kasım 2017
Anasayfa » JavaScript » JavaScript Olaylar

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.

  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.

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.

 

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.

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.

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

 

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

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.

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.

 

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

 

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

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)

 

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

 

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

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

 

 

Tüm JavaScript DOM Olayları

Window Olay Niteliği

onafterprint onload onpageshow
onbeforeprint onmessage onpopstate
onbeforeunload onoffline onresize
onerror ononline onstorage
onhashchange onpagehide

Form Olayları

onblur oninvalid
onchange onreset
oncontextmenu onsearch
onfocus onselect
oninput onsubmit

Klavye Olayları

onkeydown
onkeypress
onkeyup

Fare Olayları

onclick onmouseover
ondblclick onmouseup
onmousedown onmousewheel
onmousemove onwheel
onmouseout

Sürükleme(Drag) Olayları

ondrag ondragover
ondragend ondragstart
ondragenter ondrop
ondragleave onscroll

Pano Olayları

oncopy
oncut
onpaste

Media Olayları

onabort onloadeddata onseeked
oncanplay onloadedmetadata onseeking
oncanplaythrough onloadstart onstalled
oncuechange onpause onsuspend
ondurationchange onplay ontimeupdate
onemptied onplaying onvolumechange
onended onprogress onwaiting
onerror onratechange

Misc

onshow
ontoggle

 

Hakkında Hayri

İlginizi Çekebilir

JavaScript for … of Kullanımı

for of deyimi tekrar eden (iterable) nesneler üzerinde hareket ederek nesnenin değerini okumak için kullanılan …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir