JavaScript Academy · Pelajaran

preventDefault dan stopPropagation

Kendalikan perilaku bawaan dan perambatan peristiwa.

preventDefault dan stopPropagation adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Mengendalikan Perilaku Peristiwa

Dua mekanisme memungkinkan Anda mengendalikan peristiwa: menghentikan tindakan bawaan peramban dan menghentikan peristiwa agar tidak merambat melalui DOM.

Tindakan Bawaan

Banyak elemen memiliki perilaku bawaan: tautan berpindah halaman, pengiriman formulir memuat ulang halaman, dan kotak centang melakukan toggle. Semua ini terjadi kecuali Anda turun tangan.

preventDefault

event.preventDefault membatalkan tindakan bawaan peramban, tetapi tetap membiarkan fungsi penangan Anda berjalan.

link.addEventListener("click", (e) => {
  e.preventDefault(); // stop navigation
  console.log("handled in JS");
});

preventDefault pada Formulir

Salah satu penggunaan yang umum adalah mencegah formulir memuat ulang halaman, sehingga Anda dapat menangani pengirimannya dengan JavaScript.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  // send data via fetch instead
});

Perambatan Peristiwa

Setelah mencapai target, peristiwa merambat ke atas melalui elemen leluhur dan memicu pendengar mereka. Inilah sebabnya klik pada anak dapat menjalankan fungsi penangan induknya.

stopPropagation

event.stopPropagation mencegah peristiwa berlanjut ke elemen leluhur. Fungsi penangan saat ini tetap selesai berjalan.

child.addEventListener("click", (e) => {
  e.stopPropagation(); // parent listeners will not fire
});

preventDefault vs stopPropagation

Keduanya tidak saling bergantung. preventDefault membatalkan tindakan peramban, sedangkan stopPropagation membatalkan perambatan ke elemen lain. Anda dapat menggunakan salah satunya, keduanya, atau tidak menggunakannya.

e.preventDefault();   // no default action
e.stopPropagation();  // no bubbling

Pendengar Lain pada Elemen yang Sama

stopPropagation NOT menghentikan pendengar lain pada elemen yang sama agar tidak berjalan. Pendengar tersebut tetap dipicu.

el.addEventListener("click", (e) => e.stopPropagation());
el.addEventListener("click", () => console.log("still runs"));

stopImmediatePropagation

stopImmediatePropagation melangkah lebih jauh: metode ini menghentikan perambatan DAN mencegah pendengar lain yang masih tersisa pada elemen yang sama.

el.addEventListener("click", (e) => e.stopImmediatePropagation());
el.addEventListener("click", () => console.log("does NOT run"));

defaultPrevented

Anda dapat memeriksa event.defaultPrevented untuk mengetahui apakah preventDefault sudah dipanggil oleh fungsi penangan sebelumnya.

el.addEventListener("click", (e) => {
  console.log(e.defaultPrevented);
});

Gunakan Secukupnya

Menghentikan perambatan dapat mengganggu delegasi peristiwa di bagian lain halaman. Sebaiknya gunakan cara ini hanya jika benar-benar diperlukan dan pertimbangkan alternatif yang tetap mendukung delegasi.

Pemeriksaan Cepat

Pilih metode yang tepat.

Ringkasan

preventDefault membatalkan tindakan bawaan peramban (navigasi, pengiriman, dan sebagainya). stopPropagation menghentikan peristiwa agar tidak merambat ke elemen leluhur, sedangkan stopImmediatePropagation juga memblokir pendengar lain pada elemen yang sama. Keduanya adalah alat yang tidak saling bergantung; gunakan penghentian perambatan secukupnya agar delegasi tidak terganggu.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “preventDefault dan stopPropagation” gratis?

Ya — teks lengkap “preventDefault dan stopPropagation” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “preventDefault dan stopPropagation”?

Kendalikan perilaku bawaan dan perambatan peristiwa. Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 3 dari 4.

Berapa lama pelajaran “preventDefault dan stopPropagation” 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 JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript 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

← Kembali ke JavaScript Academy