Dalam pemrograman web, event handling (penanganan peristiwa) memungkinkan kita untuk menanggapi tindakan pengguna seperti mengklik tombol, mengisi formulir, atau pergantian halaman. Dalam JavaScript, event handling memainkan peran penting dalam menghubungkan aksi pengguna dengan tindakan yang harus dilakukan oleh program. Dalam artikel ini, kita akan membahas konsep event handling dalam JavaScript beserta contoh penggunaannya.
Bagian 1: Menambahkan Event Listener
Untuk menangani peristiwa, kita perlu menambahkan event listener ke elemen HTML yang sesuai. Event listener adalah fungsi JavaScript yang akan dieksekusi saat peristiwa terjadi.
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Event Handling</title>
</head>
<body>
<button id="tombol">Klik Saya</button>
<script>
let tombol = document.getElementById("tombol");
// Menambahkan event listener untuk peristiwa klik
tombol.addEventListener("click", function() {
alert("Tombol telah diklik!");
});
</script>
</body>
</html>Penjelasan:
Pada contoh di atas, kita memiliki sebuah tombol dengan id “tombol”. Dalam skrip JavaScript, kita menggunakan document.getElementById("tombol") untuk mengakses elemen tombol dan menyimpannya dalam variabel tombol.
Dalam pernyataan tombol.addEventListener("click", function() { ... }), kita menambahkan event listener untuk peristiwa klik. Saat tombol diklik, fungsi anonim yang didefinisikan akan dieksekusi. Dalam contoh ini, fungsi tersebut akan menampilkan jendela peringatan dengan teks “Tombol telah diklik!”.
Bagian 2: Menggunakan Event Object
Ketika menangani peristiwa, kita dapat menggunakan event object (objek peristiwa) untuk mengakses informasi lebih lanjut tentang peristiwa tersebut, seperti posisi kursor atau nilai input.
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Event Handling</title>
</head>
<body>
<input type="text" id="nama" placeholder="Masukkan nama">
<script>
let inputNama = document.getElementById("nama");
inputNama.addEventListener("input", function(event) {
let nilaiInput = event.target.value;
console.log("Nama yang dimasukkan:", nilaiInput);
});
</script>
</body>
</html>Penjelasan:
Pada contoh di atas, kita memiliki sebuah input teks dengan id “nama”. Dalam skrip JavaScript, kita menggunakan document.getElementById("nama") untuk mengakses elemen input dan menyimpannya dalam variabel inputNama.
Dalam pernyataan inputNama.addEventListener("input", function(event) { ... }), kita menambahkan event listener untuk peristiwa input. Saat nilai input berubah, fungsi anonim yang didefinisikan akan dieksekusi. Pada saat yang sama, objek event akan diteruskan sebagai argumen ke fungsi tersebut.
Dalam fungsi, kita menggunakan event.target.value untuk mengakses nilai input yang baru dimasukkan oleh pengguna. Dalam contoh ini, kita mencetak nilai input tersebut ke konsol menggunakan console.log(). Anda juga dapat melakukan tindakan lain sesuai kebutuhan aplikasi Anda.
Bagian 3: Menghentikan Default Action
Beberapa peristiwa pada elemen HTML memiliki perilaku default, seperti mengirimkan formulir saat tombol submit diklik atau mengikuti tautan saat diklik. Dalam beberapa kasus, kita mungkin perlu menghentikan perilaku default tersebut.
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Event Handling</title>
</head>
<body>
<a href="https://www.example.com" id="tautan">Kunjungi Example.com</a>
<script>
let tautan = document.getElementById("tautan");
tautan.addEventListener("click", function(event) {
event.preventDefault();
console.log("Tautan diklik, tetapi perilaku default dihentikan.");
});
</script>
</body>
</html>Penjelasan:
Pada contoh di atas, kita memiliki sebuah tautan dengan id “tautan” yang menautkan ke https://www.example.com. Dalam skrip JavaScript, kita menggunakan document.getElementById("tautan") untuk mengakses elemen tautan dan menyimpannya dalam variabel tautan.
Dalam pernyataan tautan.addEventListener("click", function(event) { ... }), kita menambahkan event listener untuk peristiwa klik. Saat tautan diklik, fungsi anonim yang didefinisikan akan dieksekusi.
Dalam fungsi, kita menggunakan event.preventDefault() untuk menghentikan perilaku default dari peristiwa klik. Dalam contoh ini, perilaku default yaitu mengikuti tautan URL akan dihentikan. Selain itu, kita juga mencetak pesan ke konsol menggunakan console.log().
Kesimpulan:
Dalam JavaScript, event handling memungkinkan kita untuk menangani peristiwa pengguna dalam aplikasi web. Dalam artikel ini, kita telah membahas konsep event handling dan memberikan contoh penggunaannya, termasuk menambahkan event listener, menggunakan event object, dan menghentikan perilaku default. Dengan pemahaman tentang event handling, kita dapat membuat interaksi yang dinamis dan menanggapi aksi pengguna
dengan tindakan yang sesuai dalam aplikasi web kita.
