Event-Event Dasar JQuery

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() {     $('#area').fadeOut(); }); $('.subjek').mouseleave(function() {     $('#area').fadeIn(); });	$('.subjek').hover(function() {     $('#area').fadeOut(); }, function() {     $('#area').fadeIn(); });

.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();
});

Lihat Demo

Lebih Lengkap:

• http://api.jquery.com/category/events/