SeniKoding.com - Event jQuery merupakan script yang akan mendeteksi sebuah aksi dari user, misalnya ketika user menekan mouse, memindahkan mouse, dan sebagainya.
Penulisan Event jQuery sama dengan penulisan Effect, namun dalam tanda kurung yang ditulis setelah event biasanya berisi fungsi yang akan dijalankan.
Belajar JQuery: Memahami Event JQuery
Format penulisan Event jQuery adalah 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 adalah click(), yang bermaksud ketika elemen HTML yang disebutkan oleh selector, yaitu tag HTML yang mempunyai id "foto" diklik, maka sebuah fungsi dijalankan. Didalam fungsi, ada effect yang bekerja yaitu effect fadeOut() yang fungsinya untuk menyembunyikan foto. Hasilnya ketika foto diklik foto akan menghilang secara perlahan-lahan.
Hasil browser:
Memahami Event jQuery
Beberapa Event jQuery yang sering dipakai:
keydown() : digunakan untuk mendeteksi ketika tombol keyboard ditekan.
keyup() : digunakan untuk mendeteksi ketika tombol keyboard dilepas.
keypress() : digunakan untuk mendeteksi ketika tombol keyboard ditekan dan posisi kursor sedang fokus pada sebuah form.
mousedown() : digunakan untuk mendeteksi ketika tombol mouse ditekan.
mousemove() : digunakan untuk mendeteksi ketika mouse dipindah.
mouseup() : digunakan untuk mendeteksi ketika tombol mouse dilepas.
mouseenter() : digunakan untuk mendeteksi ketika mouse memasuki sebuah elemen.
mouseleave() : digunakan untuk mendeteksi ketika mouse keluar dari sebuah elemen.
hover() : merupakan gabungan dari event mouseenter() dan mouseleave(). yaitu event ketika pointer mouse berada di tag HTML yang dipanggil. Misalnya merubah warna background suatu submit form.
mouseover() : digunakan untuk mendeteksi ketika pointer mouse melintasi sebuah elemen.
focus() : digunakan untuk mendeteksi ketika sebuah form sedang fokus.
focusin() : digunakan untuk mendeteksi ketika mouse diklik pada sebuah input form.
focusout() : digunakan untuk mendeteksi ketika mouse diklik pada input lain setelah sebelumnya fokus pada suatu input.
change() : digunakan untuk mendeteksi ketika nilai sebuah input form diubah.
each() : digunakan untuk mengeksekusi setiap elemen yang cocok.
select() : digunakan untuk mendeteksi ketika sebuah pilihan pada form dipilih.
blur() : digunakan untuk mendeteksi ketika sebuah input form tidak sedang fokus (keadaan normal).
submit() : digunakan untuk mendeteksi ketika tombol submit pada sebuah form ditekan.
click() : digunakan untuk mendeteksi ketika sebuah elemen diklik.
dblclick() : digunakan untuk mendeteksi ketika sebuah elemen diklik ganda.
scroll() : digunakan untuk mendeteksi ketika scroll bar digulung / ditarik.
Silakan Anda bereksperimen sendiri untuk menambah latihan.
Semoga bermanfaat Cara Memahami Event dalam jQuery, sekarang bisa dilanjut belajar Menggabungkan jQuery dan CSS.
Lebih lanjut tentang Event jQuery kunjungi www.jquery[dot]com.
- Salam -
Tidak ada komentar
Posting Komentar
Dilarang SPAM Komentar!