JavaScript · Bab 4
Event Handling & Interaktivitas Aplikasi Web
Mengenali event pengguna, memakai addEventListener, membaca input keyboard/form, dan membuat halaman merespons aksi pengguna.
Event adalah kejadian pada halaman web. Contohnya klik tombol, mengetik pada input, menekan keyboard, mengirim form, atau halaman selesai dimuat. Event handling membuat JavaScript menjalankan fungsi saat kejadian itu terjadi.
4.1 Event Klik dengan addEventListener
Event dapat dipasang dengan properti lama seperti onclick, tetapi addEventListener() lebih disarankan karena satu elemen dapat memiliki lebih dari satu handler untuk event yang sama tanpa saling menimpa.
🧪 Coba ubah: mulai total dari 10, lalu klik tombol beberapa kali.
Belum ada output.
🧪 Coba ubah: ubah contoh di atas menjadi addEventListener("click", ...).
Belum ada output.
4.2 Membaca Nilai Input
Event input terpanggil setiap kali isi input berubah. Event ini cocok untuk pencarian langsung, validasi form, dan preview teks.
🧪 Coba ubah: ganti awalan "Preview: " menjadi "Halo, ".
Belum ada output.
4.3 Event Keyboard
Event keyboard berguna untuk shortcut, kontrol sederhana, dan input cepat. keydown terjadi saat tombol ditekan, sedangkan keyup terjadi saat tombol dilepas.
🧪 Coba ubah: tambahkan kondisi untuk ArrowUp agar posisi bertambah 10.
Belum ada output.
Event keyboard juga sering dipakai untuk menggerakkan elemen 2D. Siapkan elemen dengan position: absolute, simpan posisi dalam variabel, lalu ubah style.left atau style.top.
🧪 Coba ubah: tambahkan posisiY dan gerakkan elemen dengan style.top saat ArrowUp atau ArrowDown ditekan.
Belum ada output.
4.4 Mencegah Submit Form Default
Saat form disubmit, browser biasanya memuat ulang halaman. Untuk validasi atau aplikasi interaktif, gunakan event.preventDefault() agar halaman tetap berada di tempat.
🧪 Coba ubah: ganti batas minimal username dari 3 menjadi 5.
Belum ada output.