JavaScript Olay Nesnesi(Event Object)

Javascript event nesnesi; olay dinleyicide beklenen olay tetiklendiğinde oluşturulan, olay hakkında bilgiler içeren, olaylara detaylı müdahale edilebilmesini sağlayan bir nesnedir. Örneğin mouse ile tıklama olayı gerçekleştiğinde mouse işaretçisinin konumu event nesnesi ile alınabilir. Olay nesnesinin bu bilgileri tutmasının sebebi etkileşimli ve dinamik siteler oluşturulmasını sağlamaktır. Event nesnesi addEventListener fonksiyonunda genellikle "e", "event" ya da "evt" parametresi olarak temsil edilir. Bu parametre, olay nesnesinin özelliklerine erişilebilmesini sağlar.

type: Olay türünün adını döndüren bir özelliktir. Örneğin: keydown.

currentTarget: Olay dinleyicinin eklendiği nesneyi temsil eder. Örneğin, bir butona dinleyici eklendiyse currentTarget buton nesnesini döndürür.

target: Olayı tetikleyen nesnenin bilgisini döndüren bir özelliktir.

pageX: Olay tetiklendiğinde belgeye göre mouse işaretçisinin yatay eksendeki koordinatını döndürür.

pageY : Olay tetiklendiğinde belgeye göre mouse işaretçisinin dikey eksendeki koordinatını döndürür..Sayfanın görünmeyen, kaydırma çubuğu ile ulaşılabilen kısımları dahil tüm sayfanın dikey koordinatını alır.

clientX: Olay tetiklendiğinde fare işaretçisinin sayfanın içindeki görünen içeriğe göre x eksenindeki konumunu döndürür.

clientY: Olay tetiklendiğinde fare işaretçisinin sayfanın içindeki görünen içeriğe göre y eksenindeki konumunu döndürür. pageY'den farkı clientY sadece görünen sayfanın konumuyla ilgilenir, pageY tüm belgenin (görünmeyen kısımlarda dahil) konumunun bilgisini tutar.

screenX: Fiziksel ekrana göre fare işaretçisinin yatay koordinat bilgisini döndürür.

screenY: Fiziksel ekrana göre fare işaretçisinin dikey koordinat bilgisini döndürür.

button: Olay tetiklenirken basılan fare tuşunun bilgisini rakam olarak döndürür.

buttons: Olay tetiklenirken basılan fare tuşunun bilgisini ya da yapılan tuş kombinasyonunun bilgisini sayısal bir şekilde döndürür.

altKey: Olay tetiklendiğinde "alt" tuşuna basılıp basılmadığını boolean olarak döndürür.

ctrlKey: Olay tetiklendiğinde "ctrl" tuşuna basılıp basılmadığını boolean olarak döndürür.

shiftKey: Olay tetiklendiğinde "shift" tuşuna basılıp basılmadığını boolean olarak döndürür.

key: Klavyeden basılan tuşun değerini klavyedeki tuşların değerlerine karşılacak gelecek şekilde döndürür.

preventDefault: Özellikten ziyade bir metottur. Yapılacak işlemleri iptal eder. Örneğin; bir formda mesaj gönder butonuna tıklanınca sayfanın yenilenmesini engellemek, fare tıklamalarını engellemek gibi engelleme işlemleri için kullanılır.

Event Nesnesi Kullanımı

Olay nesnesini kullanabilmek için öncelikle bir nesneye olay dinleyici eklenir ardından olay tetiklenirken çalışacak fonksiyonun içine event nesnesini temsil edecek parametre gönderilir. Bu parametre, event nesnesinin özelliklerine ulaşılabilmesini ve müdahale edilebilmesini sağlar.

const button = document.querySelector('button');
button.addEventListener("click", function (e) {
   console.log(e);
});

Yukarıdaki kod çalıştığında event nesnesinin bir çok bilgiyi tuttuğunu görebiliriz. tıklama olayı gerçekleşirken klavyeden tuşa basılıp basılmadığı, farenin konumu, buton nesnesinin sayfadaki konumu gibi durumları olay nesnesi sayesinde yakalayıp işlem yapabiliriz. Olay nesnesi bu özellikleri olay gerçekleşirken yakalar.

currentTarget

Olay dinleyicisinin eklendiği nesneyi temsil eden bir özelliktir. Olayın tetiklendiği değil dinleyicinin eklendiği nesneyi döndürür.

const container = document.querySelector('.container');
container.addEventListener('click', function(e) {
console.log(e.currentTarget.tagName);
});

Yukarıdaki kodda, container divinin içindeki buton nesnesine tıklanınca dinleyici container nesnesine eklendiği için container'ın etiket adını döndürür.

target

Olayın gerçekleştiği veya olayın hedef aldığı nesnenin bilgisini döndürür. Olayın hedef alındığı nesnenin bilgisini döndürmesi için nesnelerin iç içe olması gerekir.

Yukarıdaki kodda, currentTarget, olay dinleyicinin eklendiği nesne olan parent nesnesinin id değerini döndürürken target ise olayın gerçekleştiği nesnenin id değerini döndürür.

clientX ve clientY

Sayfadaki görünen içeriğe göre fare işaretçisinin yatay ve dikey eksendeki koordinatlarını döndürür.

const box = document.querySelector('.box');
box.addEventListener("mousemove", function (e) {
   box.innerText = e.clientX + ":" + e.clientY;
});

clientX/Y, pageX/Y ve screenX/Y Arasındaki Fark

clientX/Y, görünen içeriğe göre farenin yatay ve dikey koordinatlarını döndürür. pageX/Y, tüm belgeye göre farenin koordinatlarını hesaplar ve döndürür. screenX/Y, fare işaretçisinin fiziksel ekran üzerindeki konumunu temsil eder.

Kutunun üstüne gelindiğinde yatay eksende page ve client aynı koordinat değerini döndürürken screen cihaz ekranına göre değer döndürdü. Dikey eksende client, görünen sayfaya göre koordinat değerini döndürdü; page ise sayfanın en üstünden itibaren koordinat değerini hesaplayarak bir sonuç döndürdü.

Button

Fare olayları için kullanılan dinleyicinin olay gerçekleşirken farenin hangi tuşuna basıldığının bilgisini rakam olarak döndüren bir özelliktir. Bu özellik, "click" olay türüyle doğru çalışmayabilir bu nedenle bu özelliği "mousedown, mouseup" gibi fare olayları ile kullanmak daha doğru bir seçim olabilir.

0: Sol fare düğmesini temsil eder.

1: Orta fare düğmesini temsil eder.

2: Sağ fare düğmesini temsil eder.

3: Fare ek geri düğmesini temsil eder. Bazı farelerde iki ek düğme vardır, bu değer o düğmenin değerini temsil eder.

4: Fare ek ileri düğmesini temsil eder.

document.addEventListener("mousedown", (e) => {
    switch (e.button) {
        case 0:
            alert("Sol tuşa tıklandı");
            break;
        case 2:
            alert("Sağ tuşa tıklandı");
            break;
    }
});

Buttons

Buttons, mouse tuşlarının rakamsal karşılığınını veya tuşların kombinasyon değerini sayısal bir şekilde döndürür. Kombinasyon yaparak veya kombinasyon yapmadan direkt değerlere karşılık gelecek şekilde kullanabiliriz. Örneğin sol tuş tıklamasını "1" değeri ile kontrol ederken hem sağ hem sol düğmeye tıklandığını kontrol etmek için "3" değerini kullanırız.

1: Sol fare düğmesini temsil eder.

2: Sağ fare düğmesini temsil eder.

4: Orta fare düğmesini temsil eder.

8: Fare ek geri düğmesini temsil eder.

16: Fare ek ileri düğmesini temsil eder.

const button = document.querySelector('button');
document.addEventListener('mousedown', function (e) {
   if (e.buttons == 6) { // orta tuş => 4 + sağ tuş => 2
       console.log("orta düğme ve sağ düğmeye aynı anda basıldı.");
   }
});

altKey

Olay tetiklendiğinde "alt" tuşunun basılırsa “true”, basılmazsa “false” değerini döndürür.

document.addEventListener('click', function(e){
   console.log(e.altKey);
});

key

Klavyede basılan tuşun değerini döndürür. keyCode'un yeni versiyonudur. keyCode tuş değerleri sayılara karşılık gelirken key direkt klavye değerlerine karşılık gelir. Örneğin ctrl tuşuna basılıp basılmadığının kontrolünü keyCode ile keyCode == 17 şeklinde yaparken key ile key == "Control" şeklinde yapabiliriz. keyCode eski bir yapı olduğu için onun yerine key kullanmak daha doğru bir yaklaşım olacaktır.

document.addEventListener('keydown', function (e) {
   console.log("keyCode ile tuş basıldı: " + e.keyCode);
});
document.addEventListener('keydown', function (e) {
   console.log("key ile tuş basıldı: " + e.key);
});

preventDefault

Yapılacak işlemleri iptal eder. Form gönderildiğinde sayfanın yenilenmesini engellemek, mouse ile tıklamayı engellemek, bir bağlantıya tıklandığında bağlantının açılmasını engellemek gibi engelleme işlemler için kullanılır.

const form = document.querySelector("form");
form.addEventListener("submit", function(e){
   e.preventDefault();
});//Form gönderildiğinde sayfanın yenilenmesi engellenir.
document.addEventListener("mousedown", function (e) {
   if (e.button === 0) {
       e.preventDefault();
   }
});//sol tuşu engellenir.
document.addEventListener("contextmenu", function (e) {
       e.preventDefault();
});//sağ tuş tıklandığında açılan bağlam menüsünü engeller.

Yukarıdaki kodda, preventDefault sayesinde form gönderildiğinde sayfanın yenilenmesi, sol tuş ile içeriğin seçilmesi, sağ tuşa basılınca bağlam menüsünün açılması engellenir.