Tutorial Dasar jQuery Part II (Event-Event Dasar JQuery)

Pada tutorial kali ini kita bahas event event yang ada pada jQuery. Kalo yang belum baca part 1 silahkan dibaca terlebih dahulu disini. Sebenarnya ada banyak banget event dalam JQuery, tapi di tutorial ini 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 kita bahas (kalo tidak lupa hehe) secara terpisah.

Secara umum, penulisan event dalam JQuery dapat dituliskan seperti ini:

$(pemicu).nama_event(function() {
    //Peristiwa...
});

Ket:
    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
1. .click()
Digunakan untuk menimbulkan peristiwa berdasarkan aksi klik pada subjek/pemicu.

$('.subjek').click(function() {
    $('#area').fadeOut();
});

2. .dblclick()
Digunakan untuk menimbulkan peristiwa berdasarkan aksi klik ganda pada subjek/pemicu.

$('.subjek').dblclick(function() {
    $('#area').fadeOut();
});

3. .focus()
Digunakan untuk menimbulkan peristiwa berdasarkan aksi fokus pada subjek/pemicu (dikhususkan pada elemen-elemen berupa <input> dan <textarea>).

$('.subjek').focus(function() {
    $('#area').fadeOut();
});

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

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

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

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

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

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

10. .select()
Digunakan untuk menimbulkan peristiwa berdasarkan aksi seleksi pada subjek/pemicu (dikhususkan pada elemen-elemen berupa <input> dan <textarea>).

$('.subjek').select(function() {
    $('#area').fadeOut();
});

sumbernya : http://www.dte.web.id/2011/10/event-event-dasar-jquery.html#.Uif-vpHBBH0