DEV Community

Cover image for Javascript Notları #6 - Event'ler (Events)
Turan Kılıç
Turan Kılıç

Posted on

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> 
Enter fullscreen mode Exit fullscreen mode

Butonumuz: :)
Button

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Output aşağıdaki gibi olacaktır:
onClick Event in Javascript

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>
Enter fullscreen mode Exit fullscreen mode

Butona tıklamadan önce ve sonra:
Before Click
After Click

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>

Enter fullscreen mode Exit fullscreen mode

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

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>
Enter fullscreen mode Exit fullscreen mode

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

Sonra:
After Click

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> 

Enter fullscreen mode Exit fullscreen mode

Output:
Sayfanın normal hali:
state1

Mouse Gelince:
state2

Mouse Ayrılınca:
state3

Discussion (0)