• Hesap Oluştur
  • Oturum Aç

Javascript Event Handlers (Olay Yöneticileri)

Maximus    0

    • avatar

    Maximus  10-04-2019, Saat: 20:22

    Kredi:
    #1
    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 Smile</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 

    İYİ FORUMLAR!!!
    XxXxXxXxX
    Beğeni


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  JavaScript Teacher V3 - Learn Javascript with examples privateloader 0 201 30-04-2020, Saat: 12:18
Son Yorum: privateloader
  JavaScript Programlama Dili Maximus 0 505 03-04-2019, Saat: 22:38
Son Yorum: Maximus
  Merhabalar bugun size javascript ile sürekli değişen web sitesi başlığı nasıl yapılır Maximus 0 439 28-03-2019, Saat: 20:00
Son Yorum: Maximus
  JAVASCRIPT VE DHTML Java 0 391 26-08-2018, Saat: 18:03
Son Yorum: Java
  JavaScript'te OLAYLAR Java 0 338 26-08-2018, Saat: 17:59
Son Yorum: Java
Konuyu Okuyanlar: 1 Ziyaretçi

Hızlı Menü: