popstate olayı

Geri ve ileri düğmeleri basınca oluşan popstate olayını yakalamayı öğrenirsin.

popstate olayı

Kullanıcı geri veya ileri düğmesine bastığında (ya da history.back() gibi bir çağrı yaptığında) tarayıcı popstate olayını fırlatır. Bu olay window üzerinde dinlenir.

window.addEventListener('popstate', (event) => {
  console.log(event.state);
});

event.state, varsa yeni etkin kaydın durum nesnesini içerir. pushState ve replaceState bu olayı fırlatmaz; yalnızca geri veya ileri gezinme fırlatır.

Olay dinleme ve durum

popstate dinleyicisi içinde event.state'i okuyarak yeni etkin kaydın durumuna erişirsin. Bu, SPA'larda geri veya ileri sırasında görünümü geri yüklemek için kullanılır.

window.addEventListener('popstate', (event) => {
  if (event.state) {
    render(event.state.path);
  }
});

İlk yüklemede event.state genellikle null'dur; bu yüzden kontrol etmek iyi bir alışkanlıktır.

Uygulama popstate dinleyicisi ekle

window nesnesine 'popstate' olayı için bir dinleyici ekle. Dinleyici bir ok fonksiyonu alsın ve event.state değerini console.log ile yazdırsın.

Örnek çözümü göster

window.addEventListener('popstate', (event) => {
  console.log(event.state);
});

Kendini test et

popstate kavramlarını eşleştir

popstate

geri veya ileri olayı
event.state

kaydın durumu
pushState

popstate tetiklemez
window

olayın hedefi

popstate dinleyicisi ekle

____, (event) => { console.log(event.state); });

Cevabı göster

window.addEventListener('popstate', (event) => { console.log(event.state); });

popstate olayı ne zaman tetiklenir?
- pushState çağrıldığında
- replaceState çağrıldığında
- sayfa ilk yüklendiğinde
- geri veya ileri düğmesine basıldığında
Cevabı göster

geri veya ileri düğmesine basıldığında — Doğru! popstate geri veya ileri gezinmede tetiklenir.

Sıradaki ders: SPA yönlendirme temelleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler