Event nesnesi

Event nesnesinin target ve type özelliklerini kullanmayı öğrenirsin.

Event nesnesi

Olay dinleyicisi tetiklenince bir event nesnesi fonksiyona geçirilir. Bu nesne, olayla ilgili her şeyi taşır: tür, hedef öğe, tuş değeri, fare konumu ve daha fazlası.

button.addEventListener('click', (event) => {
  console.log(event.type);
  console.log(event.target);
});

Handler parametresine istediğin adı verebilirsin; yaygın seçim event ya da kısa e'dir. Parametreyi yazmazsan event nesnesine erişemezsin; ama yine de olay tetiklenir.

target ile currentTarget farkı

event.target olayın başladığı asıl öğeyi verir; örneğin bir düğmenin içindeki bir simgeye tıklarsan simge target olur. event.currentTarget ise dinleyicinin bağlı olduğu öğedir; yani her zaman aynı düğme.

list.addEventListener('click', (event) => {
  console.log(event.target);
  console.log(event.currentTarget);
});

target değişebilir, currentTarget sabit kalır. Sonraki grupta göreceğimiz olay yayılımı için bu fark önemlidir.

Uygulama event.target ve event.type'ı yaz

document.querySelector('.btn') ile btn öğesini seç. addEventListener('click', ...) ile bir handler ekle; handler parametresi event olsun ve içinde console.log(event.target) ile console.log(event.type) çağrıları yapsın.

Örnek çözümü göster

const button = document.querySelector('.btn');
button.addEventListener('click', (event) => {
  console.log(event.target);
  console.log(event.type);
});

Kendini test et

Hangisi olayın başladığı asıl öğeyi verir?
- event.type
- event.currentTarget
- event.target
- event.key
Cevabı göster

event.target — Doğru! event.target, tıklanan asıl öğeyi verir.

Handler parametresini ekle

button.addEventListener('click', (____) => {
  console.log(event.target);
});

Cevabı göster

button.addEventListener('click', (event) => {
  console.log(event.target);
});

Event özelliklerini eşleştir

event.target

Tıklanan asıl öğe
event.type

Olayın adı
event.currentTarget

Dinleyicinin bağlı olduğu öğe
event.key

Basılan tuş

Sıradaki ders: Özet - Olaylar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler