Pengenalan Event Pada JQuery

Pada tutorial kali ini kita akan membahas seputar pengenalan event pada JQuery, dan tentunya kita akan mengenal ragam event yang telah di sediakan oleh JQuery.

Event dalam hal ini berarti aksi yang akan di jalankan ketika user melakukan aksi seperti click / hover / scroll dan aksi – aksi lainnya. Terdapat beberapa contoh event diantaranya seperti table di bawah ini :

pengenalan event pada jquery

Cara untuk membuat event sangatlah mudah. Pertama – tama definisikan lebih dulu elemen yang akan dijadikan sebagai pemicu (misal tag <button>), kedua barulah tentukan method jQuery yang ingin anda gunakan ( misal dalam kasus ini saya gunakan fungsi click() ). Maka scriptnya adalah seperti ini :

Setelah itu, barulah anda tentukan statement yang ingin anda jalankan di dalam fungsi click(). Misal saya hendak merubah ukuran dan warna dari elemen <p>, maka script-nya adalah seperti ini :

Berikut kode lengkapnya :

Bila anda jalankan, dan menekan tombol button pada halaman, hasilnya adalah seperti gambar di bawah ini :

event click pada jquery

Dan berikut contoh live previewnya :

See the Pen
Event click pada jquery
by Lautankode (@lautankode)
on CodePen.


Event Mouse pada JQuery

Event akan terjadi apabila kalian mengarahkan kursor mouse ke objek yang dijadikan acuan. Di bawah ini adalah kode sumbernya…

Output…

event mouse hover pada jquery

Silahkan anda hover / arahkan kursor mouse pada kedua tulisan di atas. Tulisan yang berada di atas akan hilang secara perlahan2, sedangkan yang di bawah akan berubah.

Dan berikut live previewnya :

See the Pen
Event hover pada JQuery
by Lautankode (@lautankode)
on CodePen.


Event Keyboard Pada JQuery

Event akan terjadi ketika anda melakukan ketikan pada keyboard. Berikut kode sumbernya…

Output :

event keyboard pada jquery

Dan berikut live previewnya :

See the Pen
Event keyboard pada JQuery
by Lautankode (@lautankode)
on CodePen.


Scrolling Event Pada JQuery

JQuery juga dapat melakukan perubahan pada halaman ketika user melakukan aktifitas scrolling pada mouse, baik itu scroll up maupun scroll down.

Dan apabila anda melakukan scrolling pada halaman, maka pesan bertuliskan Anda melakukan Scrolling akan muncul.

scrolling event pada jquery

Berikut live previewnya :

See the Pen
Scrolling Event Pada JQuery
by Lautankode (@lautankode)
on CodePen.

Dan masih banyak lagi fungsi event JQuery lainnya.


Demikian tutorial dari pengenalan event pada JQuery.

Leave a comment

Your email address will not be published. Required fields are marked *

× Contact Us