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.
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>
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.
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.
Setelah lama ditunggu tunggu akhirnya bisa lanjut ke jQuery.
Semangat nulisnya mas Andre
Siip mas, udah disiapkan beberapa tutorial jQuery. Dalam beberapa hari ini akan di posting satu persatu :)
Gan, ane newbie Javascript/jquery, maksudnya function(e) itu apa ya ? Biasanyakan function() saja, ini ada parameter (e), dan tolong gan contoh implementasinya, hehe :D ..
Thanks Gan :D
Parameter (e) itu berisi object dimana event dilakukan. Misalnya kita men-klik sebuah tombol, maka (e) ini adalah "tombol" tersebut. Contohnya seperti ini:
$('a').click(function(e) {
e.preventDefault();
}
Ini artinya seluruh link yang ada di halaman tidak akan aktif. Huruf e ini sendiri hanya suatu kebiasaan, kita bisa ubah menjadi nama lain, misalnya function(event) atau function(yangdiklik).
Penjelasannya sedikit rumit sih gan, mesti paham DOM dan cara kerja event JavaScript.
Mas misal di klik pertama berubah warna trus misal di klik lagi ke normal lagi warnya kesemula.
itu gimana?
Kalau agan sudah paham dasar2 JavaScript, nanti akan bisa sendiri tuh. Atau bisa juga menggunakan toggleClass() jQuery. Penjelasannya bisa kesini: https://www.duniailkom.com/tutorial-belajar-jquery-cara-mengubah-class-css-elemen-html-dengan-jquery/
Kang kapan lanjut tutorial <b>Javascriptnya</b>?
Sebagian besar saya pindahkan ke eBook JavaScript Uncover, tapi mudah2an nanti beberapa artikel akan diupdate..
mantapp minn!!! thx bnget ada website kayak gini!! membantu belajar banget, tenang min saya udah klik iklan di setiap page mimin kok mantapp!! terus post yaa yg baru2 tutorial nya :D toppp!!
Hehe terimakasih, semoga bisa bermanfaat…