Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.
Jejak pengalaman belajar dan sharing IT saya, semua tertuang disini.
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Materi belum tersedia
Event Handling adalah teknik dalam JavaScript untuk menangani interaksi pengguna pada website. Interaksi ini disebut event, seperti klik tombol, mengisi form, atau menggerakkan mouse.
Dengan event handling, website menjadi interaktif dan responsif terhadap aksi pengguna.
Event adalah aksi yang terjadi pada elemen HTML, baik dilakukan oleh pengguna maupun sistem.
click → saat tombol dikliksubmit → saat form dikirimchange → saat input berubahmouseover → saat mouse diarahkanAda beberapa cara untuk menambahkan event di JavaScript:
Event langsung ditulis di dalam tag HTML.
<button onclick="tampilPesan()">Klik Saya</button><script>function tampilPesan() {alert("Tombol diklik!");}</script>👉 Mudah, tapi tidak direkomendasikan untuk project besar.
<button id="btn">Klik Saya</button><script>document.getElementById("btn").onclick = function() {alert("Klik berhasil");};</script>Cara modern dan paling fleksibel.
<button id="btn">Klik Saya</button><script>document.getElementById("btn").addEventListener("click", function() {alert("Button diklik");});</script>👉 Bisa menambahkan lebih dari satu event pada elemen yang sama.
| Event | Fungsi |
|---|---|
| click | Saat elemen diklik |
| dblclick | Klik dua kali |
| mouseover | Mouse diarahkan |
| mouseout | Mouse keluar |
| change | Nilai berubah |
| submit | Form dikirim |
Contoh penggunaan event untuk form:
<form id="form"><input type="text" id="nama" placeholder="Masukkan nama"><button type="submit">Kirim</button></form><script>document.getElementById("form").addEventListener("submit", function(e) {e.preventDefault();let nama = document.getElementById("nama").value;alert("Halo " + nama);});</script>👉 e.preventDefault() digunakan untuk mencegah reload halaman.
Event object berisi informasi tentang event yang terjadi.
document.addEventListener("click", function(e) {console.log(e.target);});👉 Bisa mengetahui elemen mana yang diklik.
<p id="teks">Klik tombol untuk ubah warna</p><button id="btn">Ubah Warna</button><script>document.getElementById("btn").addEventListener("click", function() {document.getElementById("teks").style.color = "red";});</script><button id="btn">Tampilkan / Sembunyikan</button><p id="konten">Ini konten</p><script>document.getElementById("btn").addEventListener("click", function() {let el = document.getElementById("konten");if (el.style.display === "none") {el.style.display = "block";} else {el.style.display = "none";}});</script>addEventListenerpreventDefault() pada formEvent handling dalam JavaScript memungkinkan website merespon interaksi pengguna seperti klik, input, dan submit. Dengan menggunakan addEventListener, developer dapat mengelola event dengan lebih fleksibel dan terstruktur. Pemahaman event handling sangat penting karena menjadi dasar dalam pembuatan website interaktif dan dinamis.