Bab 7: Event Handling jQuery – Membuat Website Interaktif dengan Klik, Hover, dan Lainnya

Bab 7: Event Handling jQuery – Membuat Website Interaktif dengan Klik, Hover, dan Lainnya

Setelah mempelajari Manipulasi HTML dan CSS, tahap selanjutnya dalam jQuery adalah Event Handling. Event Handling memungkinkan website bereaksi terhadap aksi pengguna, seperti klik tombol, hover, input teks, dan banyak lagi.

Dengan event jQuery, website bisa menjadi lebih interaktif, responsif, dan user-friendly.

Apa Itu Event Handling jQuery?

Event Handling adalah teknik menangani aksi pengguna pada elemen HTML, seperti:

  • Klik tombol
  • Hover pada gambar
  • Submit form
  • Keyboard input

Struktur dasar jQuery untuk event:

$(selector).event(function(){
  // kode yang dijalankan saat event terjadi
});

Event Klik (.click())

Event klik adalah yang paling sering digunakan.

Contoh:

$("#btnKlik").click(function(){
  alert("Tombol diklik!");
});

Artinya: saat tombol dengan id btnKlik diklik, muncul alert.

Event Hover (.hover())

Event hover digunakan untuk aksi saat mouse berada di atas elemen.

Contoh:

$("#kotak").hover(
  function(){ $(this).css("background-color", "yellow"); },
  function(){ $(this).css("background-color", "lightblue"); }
);

Penjelasan:

  • Fungsi pertama dijalankan saat mouse masuk
  • Fungsi kedua dijalankan saat mouse keluar

Event Focus dan Blur

Event ini biasanya digunakan pada input form.

Contoh:

$("#nama").focus(function(){
  $(this).css("border", "2px solid green");
});

$("#nama").blur(function(){
  $(this).css("border", "1px solid gray");
});
  • .focus() terjadi saat input aktif
  • .blur() terjadi saat input kehilangan fokus

Event Keyboard (.keydown(), .keyup(), .keypress())

Digunakan untuk menangkap aksi keyboard.

Contoh:

$("#inputText").keyup(function(){
  $("#display").text($(this).val());
});

Saat mengetik, teks input otomatis muncul di elemen dengan id display.

Event Form (.submit())

Menangani submit form dan biasanya dikombinasikan dengan validasi.

Contoh:

$("#form").submit(function(e){
  e.preventDefault(); // mencegah reload halaman
  alert("Form berhasil dikirim!");
});

Event this dalam jQuery

this merujuk pada elemen yang memicu event. Sangat berguna untuk menghindari memilih elemen secara manual.

Contoh:

$("button").click(function(){
  $(this).css("background-color", "red");
});

Contoh Lengkap Event Handling jQuery

<!DOCTYPE html>
<html>
<head>
  <title>Event Handling jQuery</title>
  <style>
    #kotak {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      margin: 20px;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>

<div id="kotak">Hover saya!</div>
<button id="btnKlik">Klik Saya!</button>
<input type="text" id="nama" placeholder="Ketik nama...">
<p id="display"></p>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $("#btnKlik").click(function(){
    alert("Tombol diklik!");
  });

  $("#kotak").hover(
    function(){ $(this).css("background-color", "yellow"); },
    function(){ $(this).css("background-color", "lightblue"); }
  );

  $("#nama").keyup(function(){
    $("#display").text($(this).val());
  });
</script>

</body>
</html>

Kesalahan Umum dalam Event Handling

  • ❌ Menulis event sebelum elemen dimuat
  • ❌ Salah selector
  • ❌ Tidak menggunakan $(document).ready()
  • ❌ Lupa menutup fungsi dengan });

Kesimpulan

Pada Bab 7: Event Handling jQuery, Anda telah mempelajari cara membuat website interaktif dengan klik, hover, focus, keyboard, dan submit form. Event Handling adalah inti dari interaktivitas website modern dan dasar penting sebelum mempelajari efek animasi jQuery.

Related Posts