Pengertian jQuery Event dan Cara Penggunaannya

belajar javascript

jQuery Selector dan jQuery Event merupakan inti dari jQuery. Dengan menggabungkan keduanya, kita dapat membuat berbagai interaksi menarik. Dalam tutorial belajar jQuery saat ini saya akan mengulas lebih jauh Pengertian dan Cara Pemakaian jQuery Event.

Pengertian jQuery Event

Di dalam JavaScript, Event ialah sebuah hal yang dapat dilakukan user ke sebuah element HTML, contohnya di click, double click, mouseover (cursor mouse berada diatas element), mouseout (cursor mouse telah keluar dari atas element), dll.

Misalnya saya mau membuat pesan alert() saat sebuah paragraf di klik, dengan JavaScript ini dapat dilakukan dengan kode program berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Infanthree</title>
</head>
<body>
<p id="paragraf" onclick="alert('Saya telah di klik!')">
   Silahkan klik saya
</p>
</body>
</html>

Atribut onclick dalam tag <p> diatas ialah sebuah Event. Saat di klik, akan tampil pesan popup: ‘Saya telah di klik!’. Hasil ini didapat dengan fungsi alert() JavaScript.

Selain onclick, di dalam JavaScript juga banyak event-event lain, seperti ondblclick, onmouseover, onmouseout, dll.

Penulisan seperti ini amat praktis tetapi tidak “rapi”. Sebab kita mencampurkan kode HTML dengan JavaScript. Bagaimana cara memisahkannya?

Di dalam JavaScript, ini dapat dilakukan memakai fungsi addEventListener(). Hasil yang sama bisa dihasilkan dengan kode program berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Infanthree</title>
<script src="jquery-2.1.4.js"></script>
<script>
 window.onload = function()
 {
  document.getElementById("paragraf").
  addEventListener("click", function());
 }
</script>
</head>
<body>
<p id="paragraf">
   Silahkan klik saya
</p>
</body>
</html>

Sekarang, di dalam bagian <body> tak ada kode JavaScript apapun. Event click saya tambahkan dengan fungsi addEventListener(). Terkait fungsi window.onload() sendiri sudah saya bahas di Tutorial JavaScript: Posisi Terbaik Menaruh kode JavaScipt di dalam HTML.

Cara Pemakaian jQuery Event

Sebagai alternatif, jQuery menyediakan jQuery Event dengan penulisan yang lebih praktis, berikut misalnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Infanthree</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
     $("#paragraf").click(function()     
       alert('Saya telah di klik!');
     );
   });
   </script>
</head>
<body>
<p id="paragraf">
   Silahkan klik saya
</p>
</body>
</html>

Perhatikan bagaimana jQuery mempermudah penulisan acara ini, sangat sederhana. Format penulisannya ialah:

$("jQuery_Selector").jQuery_Event(function() )

Selain event click, juga tersedia berbagai event lain, seperti dblclick, mouseenter, mouseover, mouseleave, dll.

Berikut contoh “aksi” dari bermacam-macam event javascipt yang dibikin dengan jQuery:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Infanthree</title>
<style>
#paragraf 
</style>
<script src="jquery-2.1.4.js"></script>
<script>
   $( document ).ready(function() );
   </script>
</head>
<body>
<p id="paragraf">
   Belajar jQuery Event Infanthree
</p>
</body>
</html>

Pada contoh diatas, saya membuat 4 jQuery event, yaitu click, dblclick, mouseover, dan mouseleave. Pada setiap acara ini saya merubah property CSS dari paragraf. Silahkan kamu coba sendiri dengan men-klik, double klik, dan mouseover ke atas kotak pink:

Sepanjang tutorial jQuery di Infanthree ini, kita akan mengulas banyak hal terkait jQuery Event, termasuk Event animasi seperti show(), hide(), dll.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat