Peristiwa popstate
Tanggapi navigasi mundur dan maju pada peramban.
Peristiwa popstate adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Fungsi Peristiwa popstate
Peristiwa popstate dipicu pada window ketika pengguna menavigasi riwayat (kembali, maju, atau pemanggilan JavaScript terhadap history.back). Peristiwa ini memungkinkan SPA menampilkan ulang tampilan yang tepat sebagai respons terhadap navigasi yang dimulai oleh peramban.
Kapan Peristiwa Ini Dipicu
Peristiwa popstate dipicu saat tombol kembali/maju diklik, history.back(), history.forward(), dan history.go(n). Peristiwa ini NOT dipicu saat pushState/replaceState dipanggil secara manual—keduanya merupakan pembaruan terprogram dan halaman sudah mengetahuinya.
window.addEventListener("popstate", (e) => {
console.log("Navigated to", location.pathname, "state:", e.state);
renderPage(location.pathname);
});Properti Status
Properti state pada peristiwa menyimpan objek status yang Anda berikan kepada pushState/replaceState untuk entri yang sedang dituju. Gunakan properti ini untuk memulihkan status antarmuka (tab yang terbuka, posisi gulir) yang tidak tersimpan dalam URL.
Membaca URL Baru
Bilah alamat sudah diperbarui ketika popstate dipicu. Baca location.pathname, location.search, dan location.hash untuk menemukan URL baru. Jika digabungkan dengan status, informasi ini sudah cukup untuk menampilkan tampilan tujuan.
Pemuatan Halaman Awal
popstate NOT dipicu saat halaman pertama kali dimuat—peristiwa ini hanya dipicu saat navigasi. Tampilkan tampilan awal dari location saat aplikasi dimulai, lalu biarkan popstate menangani navigasi berikutnya. Tanpa langkah ini, halaman awal akan kosong setelah navigasi kembali pertama tiba.
// Initial render
renderPage(location.pathname);
// Future navigation
window.addEventListener("popstate", () => renderPage(location.pathname));hashchange vs popstate
Untuk perutean murni berbasis hash (URL seperti /#/about), peristiwa hashchange dipicu ketika hash berubah. popstate juga dipicu untuk perubahan jalur. SPA modern menggunakan API Riwayat dan popstate; perutean berbasis hash adalah teknologi lama.
Pencegatan Klik
Untuk membuat klik biasa pada <a> memicu navigasi sisi klien, cegat klik tersebut, panggil preventDefault, lalu panggil pushState + renderPage. Periksa tombol pengubah (klik Cmd/Ctrl untuk membuka tab baru) dan teruskan klik tersebut ke perilaku bawaan.
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);
});Memulihkan Posisi Gulir
Peramban berusaha memulihkan posisi gulir secara otomatis saat navigasi kembali, tetapi hal ini tidak andal dalam SPA karena konten ditampilkan secara asinkron. Simpan posisi gulir dalam status pushState dan pulihkan saat popstate: window.scrollTo(0, e.state?.scroll ?? 0).
Kendala Penampilan Asinkron
Jika renderPage mengambil data secara asinkron, URL diperbarui sebelum konten tiba. Tampilkan status pemuatan, lalu tampilkan konten. Hindari kondisi balapan ketika pengguna mengklik kembali selama pengambilan data dan hasil pengambilan yang dibatalkan menimpa tampilan baru.
Perute dari Kerangka Kerja
React Router, Vue Router, dan perute SvelteKit semuanya membungkus History + popstate. Bahkan tanpa kerangka kerja, primitif dasarnya sama—dengarkan popstate, cegat tautan, lalu panggil pushState. Buat perute sendiri dalam sekitar 50 baris JavaScript murni jika overhead menjadi pertimbangan.
Jebakan Umum: Kebocoran Memori
Penyiapan setiap tampilan dapat memasang pendengar peristiwa dan pewaktu. Tanpa pembersihan yang jelas saat tampilan berubah (dalam popstate atau pembungkus pushState), pendengar akan menumpuk dan menurunkan kinerja seiring waktu. Lacak langganan setiap tampilan dengan AbortController dan batalkan saat tampilan berubah.
Pemeriksaan Pengetahuan
Mengapa peristiwa popstate NOT dipicu ketika Anda memanggil history.pushState sendiri?
Ringkasan
popstate dipicu saat navigasi kembali/maju oleh peramban, sehingga kode dapat mengakses status tersimpan dan lokasi baru. Peristiwa ini tidak dipicu oleh pushState/replaceState (kode Anda sudah mengetahuinya) atau saat halaman pertama kali dimuat (tampilkan secara manual). Cegat klik tautan untuk navigasi SPA, simpan posisi gulir dalam status, dan lepaskan pendengar saat tampilan berubah untuk mencegah kebocoran.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Peristiwa popstate” gratis?
Ya — teks lengkap “Peristiwa popstate” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Peristiwa popstate”?
Tanggapi navigasi mundur dan maju pada peramban. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Peristiwa popstate” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- pushState dan replaceState
- Peristiwa popstate
- Perutean Berbasis Hash vs Berbasis Jalur
- Navigation API peramban modern