Pada tutorial sebelumnya, kita telah menyentuh dasar-dasar selector dan event seperti click() dan mouseenter(). Kali ini, kita akan menyelami dunia Event jQuery lebih dalam, memahami berbagai jenis event yang bisa kamu gunakan untuk membuat halaman web yang dinamis dan responsif terhadap setiap interaksi pengguna.

Event adalah pemicu aksi. Setiap kali pengguna melakukan sesuatu pada halaman (mengklik tombol, mengisi form, menggerakkan mouse), sebuah event terjadi, dan jQuery memungkinkan kita “mendengarkan” event tersebut untuk menjalankan kode tertentu.

Kategori Utama Event jQuery

Event di jQuery dapat dikelompokkan menjadi beberapa kategori:

1. Event Mouse

Ini adalah event yang paling sering digunakan, terkait dengan interaksi mouse.

• click(): Terjadi saat elemen diklik.
• dblclick(): Terjadi saat elemen diklik dua kali.
• mouseenter(): Terjadi saat pointer mouse masuk ke area elemen.
• mouseleave(): Terjadi saat pointer mouse keluar dari area elemen.
• hover(handlerIn, handlerOut): Menggabungkan mouseenter dan mouseleave. Membutuhkan dua fungsi: satu untuk saat mouse masuk, satu lagi untuk saat mouse keluar.
• mousedown(): Terjadi saat tombol mouse ditekan di atas elemen.
• mouseup(): Terjadi saat tombol mouse dilepas di atas elemen.
• mousemove(): Terjadi saat pointer mouse bergerak di atas elemen.
• contextmenu(): Terjadi saat klik kanan pada elemen (memunculkan menu konteks).

Contoh:

<button id="myButton">Klik Saya</button>
<p id="status"></p>

<script>
$(document).ready(function(){
  $("#myButton").click(function(){
    $("#status").text("Tombol diklik!");
  });

  $("#myButton").mouseenter(function(){
    $("#status").text("Mouse masuk ke tombol.");
  });

  $("#myButton").mouseleave(function(){
    $("#status").text("Mouse keluar dari tombol.");
  });
});
</script>

2. Event Keyboard

Event ini berkaitan dengan interaksi keyboard.

• keydown(): Terjadi saat tombol keyboard ditekan.
• keypress(): Terjadi saat tombol keyboard ditekan dan dilepas (kecuali tombol modifier seperti Shift, Ctrl, Alt).
• keyup(): Terjadi saat tombol keyboard dilepas.

Contoh:

<input type="text" id="myInput" placeholder="Ketik sesuatu...">
<p id="hasilInput"></p>

<script>
$(document).ready(function(){
  $("#myInput").keyup(function(){
    $("#hasilInput").text("Anda mengetik: " + $(this).val());
  });
});
</script>

3. Event Form

Event ini terjadi saat berinteraksi dengan elemen form.

• submit(): Terjadi saat sebuah form disubmit.
• change(): Terjadi saat nilai elemen form (input, textarea, select) berubah dan elemen kehilangan fokus (blur).
• focus(): Terjadi saat elemen form mendapatkan fokus.
• blur(): Terjadi saat elemen form kehilangan fokus.

Contoh:

<form id="myForm">
  <input type="text" id="nama" placeholder="Nama Anda">
  <select id="gender">
    <option value="pria">Pria</option>
    <option value="wanita">Wanita</option>
  </select>
  <button type="submit">Kirim</button>
</form>
<p id="formStatus"></p>

<script>
$(document).ready(function(){
  $("#myForm").submit(function(event){
    event.preventDefault(); // Mencegah form dari reload halaman
    $("#formStatus").text("Form berhasil disubmit (namun dicegah refresh).");
  });

  $("#nama").change(function(){
    $("#formStatus").text("Nama diubah menjadi: " + $(this).val());
  });

  $("#gender").change(function(){
    $("#formStatus").text("Gender dipilih: " + $(this).val());
  });
});
</script>

Penting: Pada event submit(), kita sering menggunakan event.preventDefault(); untuk menghentikan perilaku default form yang akan me-reload halaman. Ini sangat berguna untuk AJAX.

4. Event Dokumen/Window

Event yang berkaitan dengan seluruh dokumen HTML atau jendela browser.

• ready(): Terjadi setelah DOM (Document Object Model) selesai dimuat. Ini adalah event yang paling penting dan sering kamu gunakan ($(document).ready(function(){ ... });).
• load(): Terjadi saat seluruh halaman (termasuk gambar, script, dll.) selesai dimuat.
• resize(): Terjadi saat ukuran jendela browser diubah.
• scroll(): Terjadi saat scroll bar elemen atau halaman digulir.

Contoh:

<div style="height: 200px; overflow: scroll; border: 1px solid black;" id="scrollDiv">
  <p>Scroll saya...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
  <p>Terus scroll...</p>
</div>
<p id="scrollStatus"></p>

<script>
$(document).ready(function(){
  $(window).resize(function(){
    $("#scrollStatus").text("Ukuran jendela diubah!");
  });

  $("#scrollDiv").scroll(function(){
    $("#scrollStatus").text("Div sedang discroll.");
  });
});
</script>

Metode on(): Cara Universal untuk Event

Selain menggunakan metode shorthand (.click(), .hover(), dll.), jQuery juga menyediakan metode on() yang lebih fleksibel dan direkomendasikan untuk sebagian besar kasus.

Sintaksnya adalah: $(selector).on(event, function(){ ... });

Keuntungan on():

• Dapat melampirkan beberapa event ke satu elemen.
• Dapat melampirkan event ke elemen yang dibuat secara dinamis (delegated events), yang akan kita bahas di tutorial lebih lanjut.

Contoh:

<button id="multiEventButton">Klik atau Arahkan</button>
<p id="multiStatus"></p>

<script>
$(document).ready(function(){
  $("#multiEventButton").on({
    click: function(){
      $("#multiStatus").text("Tombol diklik!");
    },
    mouseenter: function(){
      $("#multiStatus").text("Mouse masuk!");
    },
    mouseleave: function(){
      $("#multiStatus").text("Mouse keluar!");
    }
  });
});
</script>

Dengan memahami berbagai event ini, kamu memiliki kendali penuh atas bagaimana halaman web kamu berinteraksi dengan pengguna. Latih terus penggunaan selector dan event ini, karena ini adalah tulang punggung setiap aplikasi web interaktif menggunakan jQuery. Selamat bereksperimen! ✨