addEventListener temelleri
addEventListener ile bir öğeye olay dinleyici eklemeyi ve onclick'ten farkını öğrenirsin.
Olay dinleyici eklemek
JavaScript'te bir öğenin olaylarına tepki vermek için addEventListener metodunu kullanırsın. Bu metod bir olay türü (örneğin 'click') ve bir dinleyici fonksiyon alır; olay tetiklendiğinde fonksiyon çalışır.
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log('Tıklandı');
});Eski tarayıcılarda öğeye onclick özelliği atanırdı; ama bu yöntem tek bir dinleyiciye izin verir. addEventListener ile aynı öğeye istediğin kadar dinleyici ekleyebilir, hiçbirini ezmeden hepsi çalışır.
Dinleyici fonksiyon
addEventListener'ın ikinci parametresi bir callback fonksiyondur. Bu fonksiyon, olay tetiklendiğinde çağrılır. İstersen fonksiyonu dışarıda tanımlayıp adıyla verebilirsin; istersen doğrudan ok fonksiyonu yazabilirsin.
function handleClick() {
console.log('Tıklandı');
}
button.addEventListener('click', handleClick);Fonksiyonu adıyla verirken parantez kullanmazsın; handleClick() yazarsan fonksiyon hemen çağrılır ve olayı beklemeden çalışır. Adıyla vermek, dinleyiciyi sonra kaldırmak istediğinde işine yarar.
Uygulama Button için click dinleyicisi yaz
document.querySelector('button') ile button öğesini seç. addEventListener ile 'click' olayına bir ok fonksiyonu handler ekle ve handler içinde console.log ile kısa bir mesaj yaz.
Örnek çözümü göster
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log('Tıklandı');
});Kendini test et
-
Hangisi addEventListener'ın doğru sözdizimidir?
// A button.addEventListener(click, handler); // B button.addEvent('click', handler); // C button.addEventListener('click', handler); // D button.listen('click', handler);- A
- B
- C
- D
Cevabı göster
C — Doğru! İlk parametre olay türü dizesi, ikincisi dinleyici fonksiyon.
-
Click dinleyicisini tamamla
const button = document.querySelector('button'); button.addEventListener(____, handleClick);Cevabı göster
const button = document.querySelector('button'); button.addEventListener("click", handleClick); -
Kavramları eşleştir
- addEventListener
- Olay dinleyici ekler
- onclick
- Tek dinleyici atar
- callback
- Olayda çalışır
- 'click'
- Olay türü dizesi