Event adalah tindakan yang terjadi pada halaman web, seperti mengklik tombol, memuat halaman, mengubah isian form, dan banyak lagi. jQuery memungkinkan pengembang web untuk menangkap dan memproses event melalui metode “event handling”.
Berikut adalah beberapa contoh penggunaan event handling jQuery:
- Mengklik tombol:
$("button").click(function(){
// kode yang akan dieksekusi ketika tombol diklik
});
- Memuat halaman:
$(document).ready(function(){
// kode yang akan dieksekusi ketika halaman selesai dimuat
});
- Mengubah isian form:
$("input").change(function(){
// kode yang akan dieksekusi ketika isian form berubah
});
- Hover mouse:
$("p").hover(function(){
// kode yang akan dieksekusi ketika mouse masuk ke area elemen
}, function(){
// kode yang akan dieksekusi ketika mouse keluar dari area elemen
});
Dalam contoh di atas, metode “.click()”, “.ready()”, “.change()”, dan “.hover()” adalah metode event handling jQuery. Kode yang ditulis dalam blok function akan dieksekusi setiap kali event terjadi.
Ini hanya beberapa contoh dari banyak event yang dapat ditangkap dan diproses dengan jQuery. Pengembang web dapat menggunakan berbagai metode event handling jQuery lainnya untuk menangkap dan memproses event lain seperti keypress, submit, dan banyak lagi.
Contoh Full Kode
Berikut adalah contoh full kode menggunakan event jQuery:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World");
});
});
</script>
</head>
<body>
<button>Click me</button>
<p>This is a paragraph.</p>
</body>
</html>
Dalam contoh di atas, kode JQuery menunggu halaman selesai dimuat menggunakan metode “.ready()”, lalu menangkap event “click” pada tombol dan mengubah teks dalam elemen <p> menjadi “Hello World”.
