Event jQuery

jQuery dirancang khusus untuk penanganan peristiwa.

Fungsi peristiwa jQuery

Metode penanganan peristiwa jQuery adalah fungsi utama di jQuery.

Program peristiwa adalah metode yang dipanggil saat terjadi peristiwa di HTML. Istilah yang sering digunakan adalah 'dipicu' (atau 'diaktifkan') peristiwa.

Biasanya kode jQuery akan disimpan di metode penanganan peristiwa di bagian <head>.

Contoh

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

Coba sendiri

Dalam contoh di atas, fungsi akan dipanggil saat peristiwa klik tombol diaktifkan:

$("button").click(function() {  // kode yang ada... } )

Metode ini menyembunyikan semua elemen <p>:

$("p").hide();

Fungsi di berkas yang terpisah

Jika situs web Anda berisi banyak halaman dan Anda ingin fungsi jQuery Anda mudah untuk dipelihara, silakan letakkan fungsi jQuery Anda di berkas .js yang terpisah.

Ketika kita menunjukkan jQuery dalam tutorial, kita akan menambahkan fungsi langsung ke bagian <head>. Namun, menempatkan mereka di dalam berkas yang terpisah akan lebih baik, seperti ini (dengan mengacu ke berkas melalui properti src):

Contoh

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

Konflik Nama jQuery

jQuery menggunakan simbol $ sebagai cara penyenalan untuk jQuery.

Beberapa fungsi lain dari pustaka JavaScript lainnya (seperti Prototype) juga menggunakan simbol $.

jQuery menggunakan metode noConflict() untuk memecahkan masalah ini.

var jq=jQuery.noConflict()，membantu Anda menggunakan nama sendiri (seperti jq) untuk menggantikan simbol $.

Coba sendiri

Kesimpulan

Karena jQuery dirancang khusus untuk menangani peristiwa HTML, jadi jika Anda mengikuti prinsip berikut, kode Anda akan lebih sesuai dan mudah dipelihara:

  • Letakkan semua kode jQuery di dalam fungsi penanganan event
  • Letakkan semua fungsi penanganan event di dalam penanganan peristiwa dokumen siap
  • Letakkan kode jQuery di dalam berkas .js yang terpisah
  • Jika terjadi konflik nama, renami pustaka jQuery

Event jQuery

Berikut adalah beberapa contoh metode event jQuery:

Fungsi Event Kaitkan fungsi ke
$(document).ready(function) Kaitkan fungsi ke peristiwa siap untuk dokumen (ketika dokumen selesai dimuat)
$(selector).click(function) Aktifkan atau kaitkan fungsi ke peristiwa klik elemen yang dipilih
$(selector).dblclick(function) Aktifkan atau kaitkan fungsi ke peristiwa klik ganda elemen yang dipilih
$(selector).focus(function) Aktifkan atau kaitkan fungsi ke peristiwa focus elemen yang dipilih
$(selector).mouseover(function) Aktifkan atau kaitkan fungsi ke peristiwa mouseover elemen yang dipilih

Untuk referensi penuh, kunjungi Panduan Referensi Event jQuery。