Javascript Notları #6 - Event'ler (Events)

Merhabalar, bu yazımızda Javascript programlama dilinde "Event" adı verilen kavramı ele alacağız. Hadi başlayalım :)

Event Nedir?

Event, Javascript kodlarının-komutlarının HTML ile etkileşime geçmesine olanak sağlamaktadır. HTML tagleri içerisinde yer alır.
Event'ler çeşitli olaylar ile tetiklenebilir. Örnek olarak bir pencere açıldığında, bir butona basıldığında, pencere yeniden boyutlandırıldığında vs. gibi. Bu örnekler çoğaltılabilir.

Event Oluşturma

Bu yazıda buton örneği üzerinden gideceğim. Bu yüzden ilk olarak HTML tagi olan tagini kullanarak bir buton oluşturuyorum ve CSS ile butonun boyutunu belirtiyorum:

<button class="button">CLICK ME !!</button>
 <style> 
        .button { 
        height: 125px; 
        width: 250px;
        font-size: 35px;
        } 
</style> 

Butonumuz: :)

Button tagi içerisinde butona tıklanıldığında gerçekleşecek bir event oluşturalım:

<button class="button" onclick="tryme()">CLICK ME !!</button>

Daha sonra, butona tıklanıldığında çağrılacak "tryme()"fonksiyonunu script tagleri içerisinde tanımlayalım:

    <script> 
    function tryme() {
        alert("Butona Tıklandı !!");
    }

    </script>

Output aşağıdaki gibi olacaktır:

Tag İçerisinde İşlem Gerçekleştirme

Bu işlev sayesinde, eventlerde fonksiyon çağırmadan da farklı işlemler gerçekleştirilebilir. Buna bir örnek olarak butona tıklandığında üzerinde yazan yazının değiştirilmesi örneğini verelim.

İşlemimizi ilk olarak fonksiyon çağırarak gerçekleştirelim:

    <button class="button" onclick="tryme(this)">CLICK ME !!</button> // This keyword'ü ile butonun ID değerini gönderiyoruz.
    <script> 
    function tryme(e) {
        e.innerHTML = "Butona Tıklandı.";
    }
    </script>

Butona tıklamadan önce ve sonra:

Bu işlemi bir de tag içerisine yazacağımız komut ile deneyelim:

    <button class="button" onclick="this.innerHTML = 'Butona Tıklandı..'">CLICK ME !!</button>

Butona tıkladığımızda ise aşağıdaki sonucu alırız:

Sayfanın Üstündeki Bir Nesnenin Üzerinde Değişiklik Yapılması

İlk olarak nesneye bir ID tanımlamamız gerekiyor. Ben bir paragraf nesnesi oluşturup buna bir ID vereceğim:

    <p id="P1"> Selamlar, bu bir paragraftır.</p> // Bir paragraf oluşturdum ve ID değerini "P1" olarak ayarladım. 
    <button class="button" onclick="changeColor()">CLICK ME !!</button> // Butonun onClick Eventi içerisine bir fonksiyon tanımladım.
<script>
function changeColor() {
    var element = document.getElementById("P1"); // Sayfa üzerindeki bir elementi ID değerine göre çekip "element" değişkeni içerisinde tutuyorum.
    element.style.color = "magenta"; // "element" değişkeni artık paragrafın her özelliğine sahip, böylelikle rengini değiştirebiliyorum.
}
</script>

Şimdi ise butona tıkladığımızda ne olduğuna bakalım:
Önce:

Sonra:

Farklı Eventler: OnMouseOver - OnMouseOut

Bu sefer farklı event türleri deneyelim.
OnMouseOver - Fare imleci üzerine geldiğinde çalışan eventtir.
OnMouseOut - Fare imleci üzerine geldikten ve üstünden ayrıldıktan sonra çalışan eventtir.

<button class="button" onmouseover="mouseover()" onmouseout="mouseout()">CLICK ME !!</button> // Gerekli eventler koyuldu.
<script> // Ve fonksiyonlar yazıldı.
    function mouseover() {
        var element = document.getElementById("P1");
        element.innerHTML = "Mouse Butonun Üzerine Geldi.";
    }
    function mouseout() {
        var element = document.getElementById("P1");
        element.innerHTML = "Mouse Butonun Üzerinden Gitti.";
    }
    </script> 

Output:
Sayfanın normal hali:

Mouse Gelince:

Mouse Ayrılınca: