JavaScript
Click olayları
Click olayı ile kullanıcının tıklamasına nasıl tepki vereceğini öğrenirsin.
Click olayı
click en sık kullanılan arabirim olayıdır. Kullanıcı bir öğeyi fareyle tıkladığında tetiklenir. Çoğu düğme, bağlantı ve kart bu olayla çalışır.
const like = document.querySelector('.like');
let count = 0;
like.addEventListener('click', () => {
count = count + 1;
console.log(count);
});
Handler içine her tıklamada çalışacak kodu yazarsın. Sayacını artırmak, metni güncellemek veya bir sınıf eklemek gibi işler burada yapılır. Değişkeni handler dışında tanımlarsan değer tıklamalar arasında korunur.
Click ile durum aç/kapa
Click olayının en sık kullanımı bir durumu açıp kapatmaktır: menü aç/kapa, favori ekle/çıkar, okundu işareti. classList.toggle bu işi tek satırda yapar.
const button = document.querySelector('.menu-button');
button.addEventListener('click', () => {
const menu = document.querySelector('.menu');
menu.classList.toggle('open');
});
toggle sınıf yoksa ekler, varsa kaldırır. Böylece ayrı bir if yazmana gerek kalmaz. Daha önceki classList dersinden hatırlıyor olmalısın.
Uygulama Menü düğmesine click ile toggle ekle
document.querySelector('.menu-button') ile düğmeyi seç. addEventListener('click', ...) ile bir ok fonksiyonu handler ekle; handler içinde document.querySelector('.menu') ile menüyü seç ve classList.toggle('open') çağrısı yap.
Örnek çözümü göster
const button = document.querySelector('.menu-button');
button.addEventListener('click', () => {
const menu = document.querySelector('.menu');
menu.classList.toggle('open');
});
Kendini test et
-
Hangisi her tıklamada sayacı 1 artırır?
// A
like.addEventListener('click', () => { count++; });
// B
like.addEventListener('count++', () => { click });
// C
like.addEventListener(() => { click }, 'count++');
// D
like.addEventListener(click, count++);
Cevabı göster
A — Doğru! Olay türü 'click' dizesi, handler içinde count++ artırma yapılır.
-
Sayacı artıran handler
let count = 0;
button.addEventListener('click', () => {
count = count + ____;
console.log(count);
});
Cevabı göster
let count = 0;
button.addEventListener('click', () => {
count = count + 1;
console.log(count);
});
-
Olayları eşleştir
- click
- Tek tıklama
- dblclick
- Çift tıklama
- count++
- Sayaç artırma
- classList.toggle
- Sınıf aç/kapa
Sıradaki ders: Mouse olayları
