Estafet Klik: Belajar event bubbling, capturing, dan event delegation

Cara bermain Estafet Klik

1. Baca instruksi level. Di arena ada kotak bersarang (mis. rumah, ruang, meja, tombol) dan daftar elemen yang akan diklik.
2. Tulis JavaScript biasa. document.querySelector, addEventListener, removeEventListener, closest, dan dataset tersedia di DOM mini game ini. catat(...) menulis satu baris catatan.
3. Setelah kodemu jalan, game mengklik elemen yang disebut level. Tongkat estafet berjalan sekali: turun (capture), di target, lalu naik (bubble), dan setiap listener yang jalan diberi nomor.
4. Bandingkan daftar Dicari dengan Punyamu. Yang dicek adalah catatanmu dan urutan listener yang jalan, termasuk fasenya.
5. Tekan Cek jawaban atau Ctrl + Enter. Kalau buntu, buka Petunjuk. Petunjuk pertama mengarahkan, petunjuk terakhir hampir menjawab.
6. Level yang sudah selesai tetap tercentang saat kamu kembali dengan browser yang sama.

Yang kamu pelajari

1. Level 1

   addEventListener

   Memasang fungsi yang dijalankan setiap kali event tertentu terjadi di elemen itu.

2. Level 2

   Event bubbling

   Setelah sampai di target, event naik ke setiap elemen yang membungkusnya sampai document.

3. Level 3

   target dan currentTarget

   event.target adalah elemen yang diklik. event.currentTarget adalah elemen yang memasang listener yang sedang jalan.

4. Level 4

   Fase capture

   Sebelum naik, event turun dari document ke target. Listener dengan { capture: true } jalan di perjalanan turun ini.

5. Level 5

   eventPhase

   Bernilai 1 saat capture, 2 di target, dan 3 saat bubble. Satu elemen bisa menerima event di dua fase.

6. Level 6

   stopPropagation

   Menghentikan event pindah ke elemen berikutnya. Listener lain di elemen yang sama tetap jalan.

7. Level 7

   Berhenti saat capture

   stopPropagation() di fase capture membuat event tidak pernah sampai ke target.

8. Level 8

   stopImmediatePropagation

   Seperti stopPropagation, ditambah listener berikutnya di elemen yang sama juga tidak jalan.

9. Level 9

   Opsi once

   { once: true } melepas listener otomatis setelah jalan sekali.

10. Level 10

    removeEventListener

    Hanya melepas listener dengan jenis event, fungsi, dan opsi capture yang sama persis.

11. Level 11

    Event delegation

    Satu listener di induk menangani klik semua anaknya, termasuk anak yang ditambahkan belakangan.

12. Level 12

    closest

    Naik dari event.target ke leluhur terdekat yang cocok dengan selector, atau null kalau tidak ada.

Satu klik, tiga fase

Klik di tombol berjalan seperti estafet. Event mulai dari document, turun lewat rumah, ruang, dan meja (capture), sampai di tombol (target), lalu naik lagi lewat meja, ruang, rumah, dan document (bubble). Listener biasa hanya jalan saat naik, jadi listener di rumah jalan setelah listener di tombol.

Karena setiap klik di dalam induk pasti naik ke induk itu, kamu cukup memasang satu listener di induk lalu membaca event.target. Itulah event delegation, dan itu sebabnya item yang ditambahkan belakangan tetap tertangani tanpa listener baru.

Tanya jawab