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.


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

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


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


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

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.


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

<button onclick="kontrol()">Kontrol Et</button>

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.


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

<button onclick="kontrol(document.getElementById('sayi'))">Kontrol Et</button>

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


<div id="test1">TIKLA</div>


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

<div id="test1">TIKLA</div>

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.


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

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


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

<button id="sayi-kontrol">Kontrol Et</button>

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


<script>
window.addEventListener('click',konumGoster,false);

function konumGoster(olay)
{
window.alert(olay.offsetX+"\n"+olay.offsetY); 
}
</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


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


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

window.onclick=konumGoster;
</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.


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

window.onclick=konumGoster;
</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.


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

/********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


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

<button id="oynat">Oynat</button>

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>

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

JavaScript Olaylar

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

this anahtarı ve fonksiyon kullanımı

2. addEventListener ile nesneye olay atayarak kullanma

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

Api Olaylarını Kontrol Etme

Tüm JavaScript DOM Olayları

Window Olay Niteliği

Form Olayları

Klavye Olayları

Fare Olayları

Sürükleme(Drag) Olayları

Pano Olayları

Media Olayları

Misc

İlgili

1 Yorum

Yorum Yap X

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

this anahtarı ve fonksiyon kullanımı

2. addEventListener ile nesneye olay atayarak kullanma

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

Api Olaylarını Kontrol Etme

Tüm JavaScript DOM Olayları

Window Olay Niteliği

Form Olayları

Klavye Olayları

Fare Olayları

Sürükleme(Drag) Olayları

Pano Olayları

Media Olayları

Misc

Bunu paylaş:

İlgili

İlginizi Çekebilir

1 Yorum

Yorum Yap X