Halo teman-teman semuanya, di artikel kelima ini, kita akan belajar tentang Event Handling di jQuery, yaitu cara menangani interaksi pengguna seperti klik tombol, submit form, hover mouse, dan lain sebagainya.
Dengan memahami event handling, kita bisa membuat website yang lebih interaktif dan dinamis. Misalnya: saat tombol diklik maka muncul notifikasi, atau saat form disubmit kita bisa validasi datanya dulu.
Apa Itu Event?
Event adalah aksi yang dilakukan oleh user atau browser, seperti:
- Klik tombol
- Submit form
- Arahkan kursor (hover)
- Tekan keyboard
- dan sebagainya
jQuery menyediakan fungsi untuk menangani event-event ini dengan sangat mudah.
1. Event click
Digunakan untuk menangani klik pada elemen.
$("#tombol").click(function() {
alert("Tombol diklik!");
});
2. Event submit
Digunakan untuk menangani form yang disubmit.
$("#formku").submit(function(e) {
e.preventDefault(); // mencegah reload halaman
alert("Form berhasil disubmit!");
});
3. Event keyup dan keydown
Digunakan untuk menangani saat user menekan tombol keyboard.
$("#input").keyup(function() {
console.log("Tombol dilepas!");
});
4. Event mouseenter dan mouseleave
Untuk interaksi hover.
$("#box").mouseenter(function() {
$(this).css("background-color", "lightblue");
});
$("#box").mouseleave(function() {
$(this).css("background-color", "white");
});
5. Event change
Untuk input yang berubah, seperti dropdown atau checkbox.
$("#pilihan").change(function() {
alert("Pilihan berubah menjadi: " + $(this).val());
});
Contoh Lengkap HTML + jQuery
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Event Handling jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="tombol">Klik Saya</button>
<form id="formku">
<input type="text" id="nama" placeholder="Masukkan nama">
<button type="submit">Kirim</button>
</form>
<div id="box" style="width: 100px; height: 100px; border: 1px solid black;"></div>
<select id="pilihan">
<option value="A">Pilihan A</option>
<option value="B">Pilihan B</option>
</select>
<script>
$(document).ready(function() {
$("#tombol").click(function() {
alert("Tombol diklik!");
});
$("#formku").submit(function(e) {
e.preventDefault();
alert("Form disubmit dengan nama: " + $("#nama").val());
});
$("#box").mouseenter(function() {
$(this).css("background-color", "#dff");
});
$("#box").mouseleave(function() {
$(this).css("background-color", "#fff");
});
$("#pilihan").change(function() {
alert("Kamu memilih: " + $(this).val());
});
});
</script>
</body>
</html>
Kesimpulan
Di artikel ini, kita telah mempelajari berbagai macam event handling di jQuery seperti click, submit, keyup, mouseenter, dan change. Dengan ini, kita bisa membuat website yang responsif terhadap interaksi pengguna.
Di seri selanjutnya, kita akan membahas tentang Efek Animasi di jQuery seperti fade, slide, dan animasi custom.
Terima Kasih