Latihan buat 15 Menangani Event. Butuh DOM sungguhan. Konsep:
addEventListener, objek event, keyboard, mouse, dan event delegation. Jawaban di 15 Kunci Jawaban Event.
15.1 Balon
Tampilkan emoji balon (🎈). Panah atas membesarkannya, panah bawah mengecilkannya. Kalau terlalu besar, ganti jadi emoji ledakan (💥) dan lepas handler-nya.
Kode awal (HTML):
<p>🎈</p>
<script>
// tulis kodemu di sini
</script>Petunjuk: pasang "keydown" di window. Cek event.key == "ArrowUp"/"ArrowDown", event.preventDefault() supaya halaman gak menggulung. Simpan ukuran, ubah style.fontSize (misal dalam persen). Kalau melewati batas, ganti teks jadi 💥 dan removeEventListener. Konsep di 15 Menangani Event > Event Keyboard.
→ Jawaban: 15 Kunci Jawaban Event > 15.1 Balon
15.2 Jejak Mouse
Tampilkan beberapa elemen kecil yang mengikuti gerakan mouse dengan jeda, membentuk ekor.
Petunjuk: buat sejumlah <div> berposisi absolute. Dengarkan "mousemove" di window; tiap gerakan, tempatkan elemen berikutnya (bergiliran pakai counter modulo jumlah elemen) di event.pageX/pageY. Konsep di 15 Menangani Event > Event Pointer (Mouse dan Sentuhan).
→ Jawaban: 15 Kunci Jawaban Event > 15.2 Jejak Mouse
15.3 Piksel yang Bisa Diwarnai
Buat grid sel yang berubah warna waktu diklik, dan tetap terwarnai kalau mouse diseret sambil ditekan.
Petunjuk: buat grid sel (<div> atau <td>). Pakai event delegation: satu handler "mousedown" di grid yang membaca event.target, plus "mousemove" selama tombol ditahan untuk mewarnai sel yang dilewati. event.preventDefault() mencegah seleksi teks saat menyeret. Konsep di 15 Menangani Event > Objek Event.
→ Jawaban: 15 Kunci Jawaban Event > 15.3 Piksel yang Bisa Diwarnai