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

Posted on

jQuery Selector dan jQuery Event ialah sebuah inti dari jQuery. Dengan menggabungkan keduanya, kita dapat menyusun bermacam-macam interaksi menarik. Di panduan belajar jQuery kali ini saya akan membahas lebih jauh Pengertian dan Cara Penggunaan jQuery Event.


Pengertian jQuery Event

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

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

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

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

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

Penulisan seperti ini betul-betul gampang namun tak “rapi”. Karena kita mencampurkan kode HTML dengan JavaScript. Bagaimana cara memisahkannya?

Di di JavaScript, ini dapat dilakukan menggunakan manfaat addEventListener(). Hasil yang sama dapat diraih dengan kode program berikut:

Kini ini, di di bagian <body> tak ada kode JavaScript apapun. Event click saya tambahkan dengan manfaat addEventListener(). Mengenai manfaat window.onload() sendiri telah saya bahas di Panduan JavaScript: Posisi Terbaik Meletakkan kode JavaScipt di dalam HTML.


Cara Pemakaian jQuery Event

Selaku alternatif, jQuery menyediakan jQuery Event dengan penulisan yang lebih gampang, berikut contohnya:

Perhatikan bagaimana jQuery mempermudah penulisan event ini, betul-betul sederhana. Format penulisannya yakni:

Selain event click, pun terdapat bermacam-macam event lain, seperti dblclick, mouseenter, mouseover, mouseleave, dll.

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

Di contoh diatas, saya menyusun 4 jQuery event, yakni click, dblclick, mouseover, dan mouseleave. Di setiap event ini saya mengubah property CSS dari paragraf. Silahkan kamu 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 panduan jQuery di Source Code Program ini, kita akan membahas banyak hal terkait jQuery Event, termasuk Event animasi seperti show(), hide(), dll.

Di panduan berikutnya akan membahas mengenai cara mengambil nilai HTML dengan jQuery.


Sumber https://www.duniailkom.com/