Büyük görsel görünümü
Click olayı ve event delegation ile bir karta tıklanınca büyük görseli gösterirsin.
Olay yetkilendirmesi ile tıklama
Her görsel için ayrı dinleyici eklemek yerine, gallery kapsayıcısına tek bir click dinleyicisi ekleriz. Bu desenin adı olay yetkilendirmesi (event delegation).
Tıklanan öğeyi event.target verir. Eğer event.target.tagName === 'IMG' ise, bir görsel tıklanmış demektir; büyük görünümü o görselin kaynağıyla açarız.
Böylece ızgaraya sonradan görsel eklense bile dinleyici yeniden kurulmaz.
classList ile büyük görünüm
Büyük görünüm için bir modal div'i kullanacağız. Başlangıçta hidden sınıfı ile gizlidir; böylece ekranda görünmez. Bir karta tıklanınca iki şey yaparız:
modalImg.src = event.target.srcile büyük görselin kaynağını ayarlarızmodal.classList.remove('hidden')ile görünümü açarız
Kapatma için modal'ın kendisine bir tıklama dinleyicisi ekleriz; tıklanınca modal.classList.add('hidden') ile tekrar gizlenir.
Uygulama Büyük görünüm dinleyicilerini ekle
Önceki dersin çözümünün üzerine devam et. İskelete bir modal div'i ve modalImg eklenmiş; sen tıklama dinleyicilerini yazacaksın. gallery.addEventListener('click', function(event) {...}) ekle; içinde if (event.target.tagName === 'IMG') ise modalImg.src = event.target.src yap ve modal.classList.remove('hidden') çağır. Kapatma için modal.addEventListener('click', function() {...}) ekle ve içinde modal.classList.add('hidden') çağır.
Örnek çözümü göster
gallery.addEventListener('click', function(event) {...}) ile başla; içinde if (event.target.tagName === 'IMG') ise modalImg.src = event.target.src ve modal.classList.remove('hidden') çağır. modal.addEventListener('click', function() { modal.classList.add('hidden'); }) ile kapat.
Örnek çözüm:
// Galeri uygulaması
const app = document.getElementById("app");
const title = document.createElement("h1");
title.textContent = "Galeri";
app.appendChild(title);
const gallery = document.createElement("div");
gallery.className = "gallery";
app.appendChild(gallery);
const images = [
{ url: "https://picsum.photos/id/1/200/200", title: "Dağ manzarası", author: "Ayşe" },
{ url: "https://picsum.photos/id/2/200/200", title: "Şehir sokakları", author: "Mehmet" },
{ url: "https://picsum.photos/id/3/200/200", title: "Göl kıyısı", author: "Zeynep" }
];
async function fetchImages(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
return await response.text();
} catch (error) {
console.log(error.message);
}
}
function renderGrid(images) {
images.forEach(function(image) {
const card = document.createElement("figure");
const img = document.createElement("img");
const caption = document.createElement("figcaption");
img.src = image.url;
img.alt = image.title;
caption.textContent = image.author;
card.appendChild(img);
card.appendChild(caption);
gallery.appendChild(card);
});
}
// Büyük görünüm modalı
const modal = document.createElement("div");
modal.classList.add("hidden");
const modalImg = document.createElement("img");
app.appendChild(modal);
modal.appendChild(modalImg);
gallery.addEventListener("click", function(event) {
if (event.target.tagName === "IMG") {
modalImg.src = event.target.src;
modal.classList.remove("hidden");
}
});
modal.addEventListener("click", function() {
modal.classList.add("hidden");
});Kendini test et
-
Olay yetkilendirmesi neden kullanışlı?
gallery.addEventListener('click', function(event) { // ... });- Daha yavaş çalışır
- Sadece form öğelerinde çalışır
- Her öğeye ayrı dinleyici gerektirir
- Tek dinleyici ile tüm çocukları izler
Cevabı göster
Tek dinleyici ile tüm çocukları izler — Doğru! Üst öğedeki tek dinleyici tüm çocukları izler.
-
Tıklanan öğeyi al
const target = ____;Cevabı göster
const target = event.target; -
Olay kavramlarını eşleştir
- event.target
- Tıklanan öğe
- tagName
- Öğe türü
- classList.remove
- Sınıfı kaldırma
- classList.add
- Sınıfı ekleme
- addEventListener
- Olay dinleme