Event nesnesi
- JavaScript kursu
- Orta seviye
- Ders 35/134
- 5 dk
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.
Başlangıç kodu
// btn öğesine click dinleyicisi ekle, event.target ve event.type'ı yazÖrnek çözüm
const button = document.querySelector('.btn');
button.addEventListener('click', (event) => {
console.log(event.target);
console.log(event.type);
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangisi olayın başladığı asıl öğeyi verir?
- event.type
- event.target Doğru cevap
- event.currentTarget
- event.key
Açıklama: event.target, tıklanan asıl öğeyi verir.
2 Handler parametresini ekle
button.addEventListener('click', (____) => {
console.log(event.target);
});button.addEventListener('click', (event) => {
console.log(event.target);
});Açıklama: Handler parametresi 'event' olunca event.target erişilebilir.
3 Event özelliklerini eşleştir
| Kavram | Anlamı |
|---|---|
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ş |