Memahami Event Dalam Jquery
- Event jQuery merupakan script yang akan mendeteksi sebuah agresi dari user, contohnya dikala user menekan mouse, memindahkan mouse, dan sebagainya.
Penulisan Event jQuery sama dengan penulisan Effect, namun dalam tanda kurung yang ditulis sesudah event biasanya berisi fungsi yang akan dijalankan.
Belajar JQuery: Memahami Event JQuery
Format penulisan Event jQuery ialah sebagai berikut:
$('selector').event(function() {
.......
});
Agar lebih memahami perbedaaan Selector jQuery, Effect jQuery dan Event jQuery
silakan perhatikan script berikut:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script type="text/javascript"> $('document').ready(function() { $('button').click(function() { $(this).fadeOut(); }); }); </script> </head> <body> <button>Klik</button> </body> </html> Pada script diatas, Event jQuery nya ialah click(), yang bermaksud dikala elemen HTML yang disebutkan oleh selector, yaitu tag HTML yang memiliki id "foto" diklik, maka sebuah fungsi dijalankan. Didalam fungsi, ada effect yang bekerja yaitu effect fadeOut() yang fungsinya untuk menyembunyikan foto. Hasilnya dikala foto diklik foto akan menghilang secara perlahan-lahan.
Hasil browser:
Memahami Event jQuery
Beberapa Event jQuery yang sering dipakai:
keydown() : digunakan untuk mendeteksi dikala tombol keyboard ditekan.
keyup() : digunakan untuk mendeteksi dikala tombol keyboard dilepas.
keypress() : digunakan untuk mendeteksi dikala tombol keyboard ditekan dan posisi kursor sedang fokus pada sebuah form.
mousedown() : digunakan untuk mendeteksi dikala tombol mouse ditekan.
mousemove() : digunakan untuk mendeteksi dikala mouse dipindah.
mouseup() : digunakan untuk mendeteksi dikala tombol mouse dilepas.
mouseenter() : digunakan untuk mendeteksi dikala mouse memasuki sebuah elemen.
mouseleave() : digunakan untuk mendeteksi dikala mouse keluar dari sebuah elemen.
hover() : merupakan adonan dari event mouseenter() dan mouseleave(). yaitu event dikala pointer mouse berada di tag HTML yang dipanggil. Misalnya merubah warna background suatu submit form.
mouseover() : digunakan untuk mendeteksi dikala pointer mouse melintasi sebuah elemen.
focus() : digunakan untuk mendeteksi dikala sebuah form sedang fokus.
focusin() : digunakan untuk mendeteksi dikala mouse diklik pada sebuah input form.
focusout() : digunakan untuk mendeteksi ketika mouse diklik pada input lain sesudah sebelumnya fokus pada suatu input.
change() : digunakan untuk mendeteksi dikala nilai sebuah input form diubah.
each() : digunakan untuk mengeksekusi setiap elemen yang cocok.
select() : digunakan untuk mendeteksi dikala sebuah pilihan pada form dipilih.
blur() : digunakan untuk mendeteksi dikala sebuah input form tidak sedang fokus (keadaan normal).
submit() : digunakan untuk mendeteksi dikala tombol submit pada sebuah form ditekan.
click() : digunakan untuk mendeteksi dikala sebuah elemen diklik.
dblclick() : digunakan untuk mendeteksi dikala sebuah elemen diklik ganda.
scroll() : digunakan untuk mendeteksi dikala scroll kafetaria digulung / ditarik.
Silakan Anda bereksperimen sendiri untuk menambah latihan.
Semoga bermanfaat Cara Memahami Event dalam jQuery, kini dapat dilanjut berguru Menggabungkan jQuery dan CSS.
Lebih lanjut perihal Event jQuery kunjungi www.jquery[dot]com.
- Salam -