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:

   Silahkan klik saya

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

Atribut onclick dalam tag

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:

   Silahkan klik saya

Sekarang, di dalam bagian 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:

   Silahkan klik saya

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:

   Belajar jQuery Event Duniailkom

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.

Sumber wk.com