Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Event-Event Dasar JQuery

event-event jquery

Sebenarnya ada begitu banyak jenis event dalam , 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();
});

Lebih Lengkap:

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 13 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!