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.