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ş