Özet - Olaylar
- JavaScript kursu
- Orta seviye
- Ders 36/134
- 5 dk
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.
Başlangıç kodu
// addShortcut fonksiyonunu buraya yazÖrnek çözüm
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.
Başlangıç kodu
// addButton click ve input keydown dinleyicilerini ekleÖrnek çözüm
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();
}
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Grup kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
addEventListener |
Olay dinleyici ekler |
click |
Tıklama olayı |
keydown |
Tuşa basma |
event.target |
Tıklanan öğe |
2 Enter tuşunu kontrol et
input.addEventListener('keydown', (event) => {
if (event.key === '____') {
addShortcut();
}
});input.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
addShortcut();
}
});Açıklama: event.key === 'Enter' Enter tuşunu yakalar.