JavaScript Academy · Pelajaran

Fase Capture dan Bubble

Pahami cara peristiwa bergerak melalui DOM.

Fase Capture dan Bubble adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Dua Perjalanan melalui DOM

Saat Anda mengeklik suatu elemen, peristiwa tidak hanya dipicu pada elemen itu. Peristiwa merambat melalui pohon DOM dalam dua fase: fase penangkapan (dari atas ke bawah, dari document ke elemen sasaran) dan fase penggelembungan (dari bawah ke atas, dari elemen sasaran kembali ke document).

<div id="outer">
  <button id="inner">Click</button>
</div>

Bawaan: Penggelembungan

Secara bawaan, addEventListener mendengarkan selama fase penggelembungan. Klik pada tombol bagian dalam pertama-tama memicu penangannya, lalu penangan pada induknya, kemudian penangan pada kakeknya, dan seterusnya hingga document.

inner.addEventListener("click", () => console.log("inner"));
outer.addEventListener("click", () => console.log("outer"));
// Click inner -> logs: "inner" then "outer"

Memilih Fase Penangkapan

Berikan argumen ketiga berupa true (atau { capture: true }) untuk mendengarkan selama fase penangkapan. Penangan penangkapan berjalan dari atas ke bawah, sebelum penangan penggelembungan mana pun.

outer.addEventListener("click", () => console.log("outer capture"), true);
inner.addEventListener("click", () => console.log("inner bubble"));
// Click inner -> "outer capture" then "inner bubble"

Urutan Lengkap

Untuk klik pada #inner dengan penangan pada kedua fase, urutannya adalah: fase penangkapan dari atas ke bawah, kemudian elemen sasaran, lalu fase penggelembungan dari bawah ke atas.

document penangkapan
outer penangkapan
inner (sasaran)
outer penggelembungan
document penggelembungan

event.target versus event.currentTarget

event.target adalah elemen yang benar-benar memicu peristiwa, yaitu tempat klik terjadi. event.currentTarget adalah elemen yang penangannya sedang berjalan. Pada penangan induk yang menerima penggelembungan, keduanya berbeda.

outer.addEventListener("click", (e) => {
  console.log(e.target.id);        // "inner" - where click occurred
  console.log(e.currentTarget.id); // "outer" - listener owner
});

Menghentikan Perambatan

event.stopPropagation() menghentikan perjalanan peristiwa: peristiwa tidak akan berlanjut ke elemen berikutnya dalam fase saat ini. Penangan induk yang lebih tinggi dalam pohon tidak pernah dijalankan.

inner.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("handled here only");
});
outer.addEventListener("click", () => console.log("never runs"));

stopImmediatePropagation

stopPropagation() tetap memungkinkan pendengar lain pada elemen yang sama dijalankan. Untuk memblokir pendengar lain pada elemen yang sama, gunakan event.stopImmediatePropagation().

inner.addEventListener("click", (e) => {
  e.stopImmediatePropagation();
  console.log("first only");
});
inner.addEventListener("click", () => console.log("blocked"));

preventDefault Berbeda

Jangan samakan preventDefault() dengan stopPropagation(). preventDefault() membatalkan tindakan bawaan peramban (mengikuti tautan, mengirimkan formulir), tetapi NOT menghentikan peristiwa agar tidak merambat naik.

link.addEventListener("click", (e) => {
  e.preventDefault();  // do not navigate
  // event still bubbles to parents
});

Mengapa Penangkapan Jarang Digunakan

Sebagian besar kode menggunakan perambatan naik karena sesuai dengan intuisi: elemen tertentu bereaksi terlebih dahulu, kemudian wadah mengetahuinya. Penangkapan berguna ketika elemen induk perlu mencegat atau menolak suatu peristiwa sebelum elemen anak melihatnya.

Memeriksa Fase

event.eventPhase memberi tahu fase yang sedang aktif: 1 penangkapan, 2 pada sasaran, 3 perambatan naik. Hal ini jarang diperlukan, tetapi membantu saat menelusuri rangkaian pendengar yang rumit.

el.addEventListener("click", (e) => {
  console.log(e.eventPhase); // 1, 2, or 3
}, true);

Tidak Semua Peristiwa Merambat Naik

Sebagian besar peristiwa antarmuka pengguna (click, input, keydown) merambat naik. Beberapa peristiwa tidak melakukannya secara bawaan, seperti focus, blur, dan mouseenter. Untuk peristiwa tersebut, gunakan varian yang merambat naik (focusin, focusout) atau fase penangkapan.

Pemeriksaan Singkat

Ujilah pemahaman Anda tentang fase peristiwa.

Ringkasan

Peristiwa bergerak melalui penangkapan (turun), lalu perambatan naik (naik). Pendengar menggunakan perambatan naik secara bawaan; teruskan true untuk penangkapan. e.target adalah asal peristiwa, sedangkan e.currentTarget adalah pemilik pendengar. Gunakan stopPropagation() untuk menghentikan pergerakan dan preventDefault() untuk membatalkan tindakan bawaan. Kedua fase ini menjadi dasar delegasi peristiwa.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Fase Capture dan Bubble” gratis?

Ya — teks lengkap “Fase Capture dan Bubble” 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 “Fase Capture dan Bubble”?

Pahami cara peristiwa bergerak melalui DOM. 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 1 dari 4.

Berapa lama pelajaran “Fase Capture dan Bubble” 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