JavaScript Olay Kullanımı – Ahmet Cansever
Pazartesi , 18 Aralık 2017
Anasayfa » Javascript » JavaScript Olay Kullanımı

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ı

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

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

Hakkında Hayri

İlginizi Çekebilir

JQuery Accordion Panel

Bu örneğimizde JQuery’nin Ui eklentisini kullanarak Accordion Panel yapacağız. İlk olarak JQuery’nin sayfasından, JQuery ve …

Yorum Yap

Wordpress Tema indir