HTML Academy · Ders

popstate Olayı

Tarayıcının geri ve ileri gezinmesine yanıt verin

popstate Olayı, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Geçmiş Gezinme Olayı Ne Yapar

popstate olayı, kullanıcı geçmişte gezindiğinde (geri, ileri veya bir JavaScript history.back çağrısı yaptığında) window üzerinde tetiklenir. SPA'in, tarayıcı tarafından başlatılan gezinmeye karşılık doğru görünümü yeniden oluşturmasını sağlar.

Ne Zaman Tetiklenir

Bu olay geri ve ileri düğmelerine tıklandığında, history.back(), history.forward() ve history.go(n) çağrıldığında tetiklenir. pushState veya replaceState elle çağrıldığında tetiklenmez — bunlar programatik güncellemelerdir ve sayfa bunlardan zaten haberdardır.

window.addEventListener("popstate", (e) => {
  console.log("Navigated to", location.pathname, "state:", e.state);
  renderPage(location.pathname);
});

Durum Özelliği

Olayın state özelliği, gezinilen kayıt için pushState veya replaceState'e geçirdiğiniz durum nesnesini içerir. URL'de bulunmayan kullanıcı arayüzü durumunu (açık sekme veya kaydırma konumu gibi) geri yüklemek için bunu kullanın.

Yeni Adresi Okuma

Geçmiş gezinme olayı tetiklendiğinde adres çubuğu zaten güncellenmiş olur. Yeni adresi bulmak için location.pathname, location.search ve location.hash değerlerini okuyun. Durum bilgisiyle birlikte bunlar, hedef görünümü oluşturmak için gereken tüm bilgidir.

İlk Sayfa Yüklemesi

Geçmiş gezinme olayı ilk sayfa yüklemesinde tetiklenmez — yalnızca gezinme sırasında tetiklenir. Başlangıçta ilk görünümü location'dan oluşturun, ardından sonraki gezinmeleri bu olayın işlemesine izin verin. Aksi halde ilk geri gezinme sonrasında ilk sayfa boş kalır.

// Initial render
renderPage(location.pathname);
// Future navigation
window.addEventListener("popstate", () => renderPage(location.pathname));

Karma Değişikliği ve Geçmiş Gezinme Olayı

Yalnızca karma kullanan yönlendirmelerde (/#/about gibi adreslerde), karma değiştiğinde hashchange olayı tetiklenir. Geçmiş gezinme olayı yol değişikliklerinde de tetiklenir. Modern SPA'ler Geçmiş API'sini ve bu olayı kullanır; karma yönlendirmesi eski bir yaklaşımdır.

Tıklamaları Yakalama

Normal bir <a> tıklamasının istemci tarafı gezinmesini başlatmasını sağlamak için tıklamayı yakalayın, preventDefault çağrısı yapın ve pushState + renderPage çağırın. Değiştirici tuşları kontrol edin (yeni sekme açmak için Cmd/Ctrl tıklaması) ve bunları varsayılan davranışa bırakın.

document.addEventListener("click", (e) => {
  const a = e.target.closest("a");
  if (!a || a.target || e.metaKey || e.ctrlKey) return;
  e.preventDefault();
  history.pushState(null, "", a.href);
  renderPage(location.pathname);
});

Kaydırma Konumunu Geri Yükleme

Tarayıcılar geri gezinme sırasında kaydırma konumunu otomatik olarak geri yüklemeyi dener, ancak içerik SPA'lerde eşzamansız oluşturulduğu için bu güvenilir değildir. Kaydırma konumunu pushState durumuna kaydedin ve geçmiş gezinme olayında geri yükleyin: window.scrollTo(0, e.state?.scroll ?? 0).

Eşzamansız Oluşturma Uyarısı

renderPage verileri eşzamansız olarak getiriyorsa adres, içerik gelmeden önce güncellenir. Bir yükleniyor durumu gösterin, ardından içeriği oluşturun. Kullanıcının veri getirme işlemi sırasında geri düğmesine bastığı ve iptal edilen işlemin sonucunun yeni görünümün üzerine yazdığı yarış durumlarından kaçının.

Yazılım Çatısı Yönlendiricileri

React Router, Vue Router ve SvelteKit'in yönlendiricisi, Geçmiş API'si ile geçmiş gezinme olayını birlikte kullanır. Bir yazılım çatısı olmadan da temel yapı aynıdır — geçmiş gezinme olayını dinleyin, bağlantıları yakalayın ve pushState çağırın. Ek yükün önemli olduğu durumlarda yaklaşık 50 satır saf JavaScript ile kendi yönlendiricinizi yazabilirsiniz.

Yaygın Tuzak: Bellek Sızıntıları

Her görünümün kurulumu olay dinleyicileri ve zamanlayıcılar ekleyebilir. Görünüm değiştiğinde (geçmiş gezinme olayında veya pushState sarmalayıcısında) açıkça temizleme yapılmazsa dinleyiciler birikir ve zamanla performansı düşürür. Görünüm başına abonelikleri bir AbortController ile izleyin ve görünüm değiştiğinde iptal edin.

Bilgi Kontrolü

history.pushState'i kendiniz çağırdığınızda geçmiş gezinme olayı neden tetiklenmez?

Özet

Geçmiş gezinme olayı, tarayıcının geri ve ileri gezinmelerinde tetiklenir ve kaydedilmiş duruma ile yeni konuma erişmenizi sağlar. pushState veya replaceState çağrılarında (kodunuz zaten bunları bildiği için) ve ilk sayfa yüklemesinde (görünümü elle oluşturmanız gerektiği için) tetiklenmez. SPA gezinmesi için bağlantı tıklamalarını yakalayın, kaydırma konumunu duruma kaydedin ve sızıntıları önlemek için görünüm değiştiğinde dinleyicileri kaldırın.

Sıkça Sorulan Sorular

“popstate Olayı” dersi ücretsiz mi?

Evet — “popstate Olayı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“popstate Olayı” dersinde ne öğreneceğim?

Tarayıcının geri ve ileri gezinmesine yanıt verin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“popstate Olayı” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön