JavaScript
Özet - Olaylar
Click ve keydown olaylarını kullanarak bir kısayol girişi uygulaması yazarsın.
Özet - Olaylar
Bu grupta olayların temelini öğrendin: addEventListener ile dinleyici eklemek, click ile tıklamaya tepki vermek, mouseover ve mouseout ile fareyi izlemek, keydown ile tuşları yakalamak ve event nesnesinin target ve type özelliklerini kullanmak.
Şimdi bunları bir araya getirelim: kullanıcı bir metin kutusuna kısayol yazıp Enter'a basınca ya da Ekle düğmesine tıklayınca, kısayol listesine eklensin. Önce addShortcut fonksiyonunu yazacağız, sonra iki dinleyici ile bağlayacağız.
Uygulama addShortcut fonksiyonunu yaz
addShortcut adında bir fonksiyon tanımla. İçinde document.querySelector('#shortcut-input') ile input öğesini seç; document.createElement('li') ile yeni bir liste öğesi oluştur; textContent'ine input'un value değerini ata; classList.add('shortcut') ile sınıf ekle; son olarak document.querySelector('#shortcut-list') üzerinde appendChild ile öğeyi listeye ekle.
Örnek çözümü göster
function addShortcut() {
const input = document.querySelector('#shortcut-input');
const item = document.createElement('li');
item.textContent = input.value;
item.classList.add('shortcut');
document.querySelector('#shortcut-list').appendChild(item);
input.value = '';
}
Uygulama Dinleyicileri ekle
document.querySelector('#add-button') ile düğmeyi, document.querySelector('#shortcut-input') ile input'u seç. Düğmeye addEventListener('click', ...) ile bir ok fonksiyonu handler ekle ve içinde addShortcut() çağrısı yapsın. Input'a addEventListener('keydown', ...) ile bir handler ekle; handler parametresi event olsun, event.key === 'Enter' olduğunda addShortcut() çağrısı yapsın.
Örnek çözümü göster
const addButton = document.querySelector('#add-button');
const input = document.querySelector('#shortcut-input');
addButton.addEventListener('click', () => {
addShortcut();
});
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
addShortcut();
}
});
Kendini test et
-
Grup kavramlarını eşleştir
- addEventListener
- Olay dinleyici ekler
- click
- Tıklama olayı
- keydown
- Tuşa basma
- event.target
- Tıklanan öğe
-
Enter tuşunu kontrol et
input.addEventListener('keydown', (event) => {
if (event.key === '____') {
addShortcut();
}
});
Cevabı göster
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
addShortcut();
}
});
Sıradaki ders: Event bubbling
