Sebenarnya ada begitu banyak jenis event dalam JQuery, namun di sini Saya hanya ingin memperkenalkan event-event yang paling umum dan paling banyak digunakan untuk memicu efek animasi saja. Sedangkan untuk event-event yang lainnya suatu saat akan Saya jelaskan secara terpisah apabila Saya telah mendapatkan contoh penerapan yang tepat.
Secara umum, penulisan event dalam JQuery dapat dituliskan seperti ini:
$(pemicu).nama_event(function() {
//Peristiwa...
});- Pemicu: adalah elemen yang akan menimbulkan aksi apabila dikenai event
- .nama_event: adalah event (perintah) yang akan diberikan pada elemen pemicu
- Peristiwa: adalah peristiwa yang akan terjadi apabila pemicu telah mendapatkan perintah.
Sebagai contoh, kita buat sebuah skenario: “Ada sebuah tombol yang mengandung atribut berupa class='subjek' dan sebuah area yang mengandung atribut id='area'. Apabila tombol tersebut diklik, maka area akan memudar perlahan kemudian menghilang (fadeOut)”
Jika dituliskan dalam bahasa JQuery, maka akan menghasilkan kalimat seperti ini:
$('.subjek').click(function() {
$('#area').fadeOut();
});Dan ini adalah bentuk elemennya:
<button class='subjek'>Pencet!</button>
<div id='area'>Konten</div>Event-Event Dasar
.click()
Digunakan untuk menimbulkan peristiwa berdasarkan aksi klik pada subjek/pemicu.
$('.subjek').click(function() {
$('#area').fadeOut();
});.dblclick()
Digunakan untuk menimbulkan peristiwa berdasarkan aksi klik ganda pada subjek/pemicu.
$('.subjek').dblclick(function() {
$('#area').fadeOut();
});.focus()
Digunakan untuk menimbulkan peristiwa berdasarkan aksi fokus pada subjek/pemicu (dikhususkan pada elemen-elemen berupa <input> dan <textarea>).
$('.subjek').focus(function() {
$('#area').fadeOut();
});.mouseover()
Digunakan untuk menimbulkan peristiwa berdasarkan aksi kedatangan pointer mouse di atas subjek/pemicu baik pada elemen induk maupun anak-anak elemennya.
$('.subjek').mouseover(function() {
$('#area').fadeOut();
});.mouseout()
Digunakan untuk menimbulkan peristiwa berdasarkan aksi kepergian pointer mouse dari atas subjek/pemicu baik pada elemen induk maupun anak-anak elemennya.
$('.subjek').mouseout(function() {
$('#area').fadeOut();
});.mouseenter()
Mirip dengan .mouseover(), digunakan untuk menimbulkan peristiwa berdasarkan aksi kedatangan pointer mouse di atas subjek/pemicu. Namun saat pointer mouse sudah memasuki elemen induk (.mouseover()) dan kemudian pointer mendatangi anak-anak elemen di dalamnya, itu tidak masuk hitungan .mouseenter() untuk yang ke sekian kalinya.
$('.subjek').mouseenter(function() {
$('#area').fadeOut();
});.mouseleave()
Mirip dengan .mouseout(), digunakan untuk menimbulkan peristiwa berdasarkan aksi kepergian pointer mouse dari subjek/pemicu. Namun saat pointer mouse meninggalkan sebuah anak elemen (dan masih dalam elemen induk), itu tidak bisa disebut sebagai .mouseleave(), hingga ketika pointer benar-benar telah keluar dari elemen induk, barulah bisa disebut sebagai .mouseleave() (.mouseleave() terhadap elemen induk)
$('.subjek').mouseleave(function() {
$('#area').fadeOut();
});.hover()
.hover() merupakan gabungan antara event .mouseenter() dan .mouseleave(). Susunan event .hover() juga merupakan penggabungan antara .mouseenter() dan .mouseleave() seperti ini:
| .mouseenter() dan .mouseleave() | .hover() |
|---|---|
$('.subjek').mouseenter(function() { | $('.subjek').hover(function() { |
.scroll()
Digunakan untuk menimbulkan peristiwa berdasarkan aksi scroll pada area yang menjadi subjek/pemicu peristiwa (dikhususkan pada area-area yang mengandung scroll bar).
$('.subjek').scroll(function() {
$('#area').fadeOut();
});.select()
Digunakan untuk menimbulkan peristiwa berdasarkan aksi seleksi pada subjek/pemicu (dikhususkan pada elemen-elemen berupa <input> dan <textarea>).
$('.subjek').select(function() {
$('#area').fadeOut();
});
0 comments:
Post a Comment