Tutorial Belajar jQuery Part 6: Pengertian jQuery Event dan Cara Penggunaannya

jQuery Selector dan jQuery Event merupakan inti dari jQuery. Dengan menggabungkan keduanya, kita bisa membuat berbagai interaksi menarik. Dalam tutorial belajar jQuery kali ini saya akan membahas lebih jauh Pengertian dan Cara Penggunaan jQuery Event.


Pengertian jQuery Event

Di dalam JavaScript, Event adalah suatu hal yang bisa dilakukan user ke sebuah element HTML, misalnya di click, double click, mouseover (cursor mouse berada diatas element), mouseout (cursor mouse sudah keluar dari atas element), dll.

Misalkan saya ingin membuat pesan alert() ketika sebuah paragraf di klik, dengan JavaScript ini bisa dilakukan dengan kode program berikut:

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

See the Pen Contoh Event dengan JavaScript by duniailkom (@duniailkom) on CodePen.10206

Atribut onclick dalam tag <p> diatas adalah sebuah Event. Ketika di klik, akan tampil pesan popup: ‘Saya sudah 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 sangat praktis namun tidak “rapi”. Karena kita mencampurkan kode HTML dengan JavaScript. Bagaimana cara memisahkannya?

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

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

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


Cara Penggunaan jQuery Event

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

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

Perhatikan bagaimana jQuery memudahkan penulisan event ini, sangat sederhana. Format penulisannya adalah:

$("jQuery_Selector").jQuery_Event(function() { ...isi event disini...   })

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

Berikut contoh “aksi” dari berbagai event javascipt yang dibuat dengan jQuery:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<style>
#paragraf {
   width:600px;
   height:80px;
   background-color:pink;
   line-height:80px;
   text-align:center;
   font-size:30px;
}
</style>
<script src="jquery-2.1.4.js"></script>
<script>
   $( document ).ready(function() {
 
     $( "#paragraf" ).click(function() {    
       $( "#paragraf" ).css( "color", "green" );
     });
 
     $( "#paragraf" ).mouseover(function() {    
       $( "#paragraf" ).css( "background-color", "silver" );
     });
 
     $( "#paragraf" ).mouseout(function() {    
       $( "#paragraf" ).css( "background-color", "pink" );
     });
 
     $( "#paragraf" ).dblclick(function() {    
       $( "#paragraf" ).css( "border", "solid 2px black" );
     });
 
   });
   </script>
</head>
<body>
<p id="paragraf">
   Belajar jQuery Event Duniailkom
</p>
</body>
</html>

Contoh Pengertian jQuery Event

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

See the Pen Contoh Penggunaan jQuery Event by duniailkom (@duniailkom) on CodePen.10206

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

Dalam tutorial berikutnya akan membahas tentang cara mengambil nilai HTML dengan jQuery.


Tutorial Terkait:

6 Comments

  1. Rusman
    25 Mar 16
    • Andre
      26 Mar 16
  2. Abdullah
    02 Aug 16
    • Andre
      02 Aug 16
  3. Rois
    27 Nov 16
    • Andre
      28 Nov 16

Add Comment