JavaScript
Görev tamamlama ve silme - DOM
Event delegation ile tek bir dinleyici kullanarak tamamlama ve silme işlemlerini yaparsın.
Listede olay delege etme
Listedeki her li öğesine ayrı ayrı dinleyici eklemek yerine, tek bir dinleyiciyi ul üzerine kurarız. Bu düzene olay delege etme (event delegation) denir. Tıklama kabarcıklandığında list dinleyicisi yakalar.
Dinleyicinin içinde event.target bize gerçek tıklanan öğeyi verir. target.tagName === "LI" kontrolü ile öğenin bir görev olup olmadığını anlarız.
Tek tıklama ile classList.toggle("done") yapacağız; çift tıklama ile list.removeChild(target) ile sileceğiz.
Görevi silmek
Çift tıklama ile görevi silmek için list.removeChild(target) çağrısı yaparız. removeChild bir ebeveyn üzerinde çağrılır ve kaldırılacak çocuğu alır. list ebeveyn, target ise çocuktur.
İki ayrı dinleyici kullanacağız: "click" ve "dblclick". Her ikisi de event.target üzerinden çalışır; sadece olay türü farklıdır.
Böylece tek tıklama tamamlandı yapar, çift tıklama siler.
Uygulama Tamamlama ve silmeyi ekle
Önceki dersin çözümünün üzerine devam et. list üzerine "click" dinleyicisi ekle: tıklanan öğe LI ise classList.toggle("done") yap. Sonra "dblclick" dinleyicisi ekle: tıklanan öğe LI ise list.removeChild(target) ile sil. Her ikisinde de event.target kullan.
Örnek çözümü göster
list.addEventListener('click', function(event) { const target = event.target; if (target.tagName === 'LI') target.classList.toggle('done'); }) yaz. dblclick için benzer şekilde list.removeChild(target) çağır.
Örnek çözüm:
// Yapılacaklar uygulaması
const app = document.getElementById("app");
const title = document.createElement("h1");
title.textContent = "Yapılacaklar";
app.appendChild(title);
const input = document.createElement("input");
input.placeholder = "Yeni görev";
const addButton = document.createElement("button");
addButton.textContent = "Ekle";
const list = document.createElement("ul");
app.appendChild(input);
app.appendChild(addButton);
app.appendChild(list);
function addTask() {
const text = input.value;
if (text === "") return;
const item = document.createElement("li");
item.textContent = text;
list.appendChild(item);
input.value = "";
}
addButton.addEventListener("click", addTask);
list.addEventListener("click", function(event) {
const target = event.target;
if (target.tagName === "LI") {
target.classList.toggle("done");
}
});
list.addEventListener("dblclick", function(event) {
const target = event.target;
if (target.tagName === "LI") {
list.removeChild(target);
}
});
Kendini test et
-
event.target neyi verir?
list.addEventListener("click", function(event) {
const target = event.target;
});
- Dinleyicinin bağlı olduğu öğeyi
- Tıklama sayısını
- Olayın türünü (örn. 'click')
- Gerçek tıklanan öğeyi
Cevabı göster
Gerçek tıklanan öğeyi — Doğru! event.target gerçek tıklanan öğeyi verir.
-
done sınıfını aç/kapat
target.classList.____("done");
Cevabı göster
target.classList.toggle("done");
-
Tıklama türü ve sonucu eşleştir
- click
- done sınıfını aç/kapat
- dblclick
- Görevi sil
- event.target
- Tıklanan öğeyi verir
Sıradaki ders: Proje sonu - Todo DOM
