Javascript Olay Yöneticileri (1 Viewer)

dogkiller · 6 Şub 2019

Javascript Event Handlers (Olay Yöneticileri)
Javascript’in bir web sayfasını interaktif yapabilmesinin en büyük faktörü olay yöneticileridir.
Olay yöneticileri sayfa veya sayfadaki herhangi bir element ile etkileşime girildiği zaman istediğimiz olayların gerçekleşmesini sağlar.

Örnek kullanım:
Html Kodu:

Kod:

<img src=”resimurlsi” onclick=”alert(‘resme tıkladınız’)”/>

Yukarıdaki onclick olayı ile resim üzerinde bir defa tıkladığında ekrana resme tıkladınız uyarısı vermesini sağladık.
Olaylardaki Javascript kodları etiketlerin içine yazılabildiği gibi fonksiyonlara referans verilerek de kullanılabilir.
Örnek kullanım:
JS Kodu:

Kod:

function tiklama(){
     alert(“tikladiniz”);
 }

Html Kodu:

Kod:

 <img src=”resimurlsi” onclick=”tiklama()”/>

Şimdi gelelim olaylara.

Eklendiği elementin üstüne bir defa tıklandığında olacak olayları temsil eder.
Örnek kullanım:
JS Kodu:

Kod:

 function tektiklama(){
     alert(“Tek tıkladınız”);
 }

Html Kodu:

Kod:

 <button onclick=”tektiklama()”>Buraya Tıkla</button>

Eklendiği elemetin üstüne çift tıkladığı zaman olacak olayları temsil eder.
Örnek kullanım:
JS Kodu:

Kod:

 function cifttiklama(){
     alert(“Çift Tıkladınız”);
 }

Html Kodu:

Kod:

 <button ondblclick=”cifttiklama()”>Çift Tıkla</button>

Olayın mantığını kavradığımıza göre hızlıca diğer olay yöneticilerini de göstereyim.

Eklendiği elementin üzerine gelindiğinde olacak olayları temsil eder.
Örnek kullanım:
Html Kodu:

Kod:

 <button onmouseover=”alert(‘butonun üzerine geldiniz’)”>Üzerine Gel</button>

Eklendiği elementin üzerinden fare imleci çekildiği zaman olacak olayları temsil eder.
Örnek kullanım:
Html Kodu:

Kod:

 <button onmouseout=”alert(‘butonun üzerine çekildiniz’)”>Çek Ellerini Üzerimden</button>

Eklendiği elementin üzerinde fare imleci hareket ettirildiği zaman olacak olayları temsil eder.
Örnek kullanım:
Html Kodu:

Kod:

 <button onmousemove=”alert(‘Git başka yerde oyna’)”>Buralarda gezinme</button>

Eklendiği elementin üzerine basıldığı an gerçekleşen olayları temsil eder. onclick’ten farkı bu olayla fare tuşunun bırakılmasına gerek yoktur.
Örnek kullanım:
Html Kodu:

Kod:

 <button onmousedown=”alert(‘Çok bastırma’)”>Bas bana :)</button>

Eklendiği elementin üzerinde fare tuşu bırakıldığı an olacak olayları temsim eder.
Örnek kullanım:
Html Kodu:

Kod:

 <button onmousedown=”alert(‘Böyle daha iyi’)”>Bırak beni</button>

Eklendiği element aktifken yani focused haldeyken bir tuşa basıldığında olacak olayları temsil eder.
Eğer onkeydown olayını body elementi için kullanırsanız sayfa açıkkken olacak olayları kullanabilirsiniz.
Aşağıdaki kodu herhangi bir tuşa basıldığında olacak olayları gösterir.
Örnek kullanım:
Html Kodu:

Kod:

 <body onkeydown=”alert(‘Böyle daha iyi’)”>Sayfa içeriği</body>

Eğer basılmasını istediğimiz tuşu ayarlama istiyorsak if-else statement ile bunu ayarlayabiliriz. Body elementi için ayarlayabileceğimiz gibi, herhangi bir elementin etiketine eklemeden de Javascript kodları içerisinden window bileşeni ile de kullanabiliriz. Aşağıda örnek kodu vereceğim sonra açıklamasını yapacağım.
Örnek kullanım:
JS Kodu:

Kod:

 window.onkeydown=function(olay){
     if(olay.keyCode==32){
         alert(“Boşluk tuşuna bastın”)
     }else{
         //Aksi halde birşey yapmıyoruz.
     }
 }

Gelelim açıklamasına. “window” ibaresi ile elementin tarayıcı penceresi olduğunu belirttik. Onkeydown olayını bir fonksiyona atadık. Fonksiyon içerisine olay değişkeni parametresi verdik. İllaki olay ismi vermek zorunda değilsiniz bu arada. Daha sonradan bir tuşa basıldığı zaman işlem gerçekleşmesi yerine, if-else statement kullanarak istenilen tuş ile işlem yapılmasını sağladık. Olay.keyCode değeri 32 ise yani basılan tuş 32 kodlu tuş (Boşluk tuşuna tekabül eder) ise ekrana uyarı bastırmasını sağladık.

Metin kutusu içinde yazı seçildiği zaman olacak olayları temsil eder.
Örnek kullanım:
Html Kodu:

Kod:

 <input type=”text” onselect=”alert(‘yazıyı seçtin’)”/>

Eklendiği Text Inputu aktifken olacak olayları temsil eder.
Örnek kullanım:
Html Kodu:

Kod:

 <input type=”text” onfocus=”alert(‘kutu aktif’)”/>

Eklendiği Text Inputu aktiflikten çıkınca olacak olayları temsil eder.
Örnek kullanım:
Html Kodu:

Kod:

 <input type=”text” onblur=”alert(‘Benimle ilgilenir misin?’)”/>

Body elementine yazılır. Tarayıcı penceresini boyutu değiştiği zaman gerçekleşecek olayları temsil eder.
Örnek kullanım:
Html Kodu:

Kod:

 <body onresize=”alert(‘percere boyutu değişti’)”>Sayfa içeriği</body>

Eklendiği elementin yüklenme olayını temsil eder. Eğer body elementine eklerseniz, sayfanın yüklenme sırasında olacak olayları ayarlayabilirsiniz.
Örnek kullanım:
Html Kodu:

Kod:

 <body onload=”alert(‘sayfa yüklendi’)”>Sayfa içeriği</body>

Elementin kaldırılacağı zaman olacak olayları temsil eder. Eğer body elementi içerisine eklerseniz, sayfa kapatılırken olacak olayları ayarlayabilirsiniz.
Örnek kullanım:
Html Kodu:

Kod:

 <body onunload=”alert(‘Hoşçakalın’)”>Sayfa içeriği</body>

Yazı anlatımı kendime aittir. Eğer yazıyı beğendiyseniz birşey yapmanıza gerek yok. Siz bilirsiniz. Yapacağınız benim bi’ işime yaramaz zaten

Javascript Olay Yöneticileri (1 Viewer)

Users who are viewing this thread

About Us & Legal Notice