JavaScript Olay Kullanımı

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 sık kullanılan 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>

Window Olay Niteliği

onerror	onload	onoffline
ononline	onresize

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

JavaScript Olay Kullanımı

HTML Etiket İçinde Olay Kullanımı

this anahtarı ve fonksiyon kullanımı

Window Olay Niteliği

Form Olayları

Klavye Olayları

Fare Olayları

Diğer Örnekler:

Yorum yap X

HTML Etiket İçinde Olay Kullanımı

this anahtarı ve fonksiyon kullanımı

Window Olay Niteliği

Form Olayları

Klavye Olayları

Fare Olayları

Diğer Örnekler:

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X