Sebenarnya ada begitu banyak jenis event dalam JQuery, namun di sini Saya hanya ingin memperkenalkan event-event yang paling umum dan paling banyak dipakai untuk memicu pengaruh animasi saja. Sedangkan untuk event-event yang lainnya suatu dikala akan Saya jelaskan secara terpisah apabila Saya telah mendapat teladan penerapan yang tepat.
Secara umum, penulisan event dalam JQuery sanggup dituliskan menyerupai ini:
$(pemicu).nama_event(function() { //Peristiwa... });- Pemicu: yakni elemen yang akan menjadikan agresi apabila dikenai event
- .nama_event: yakni event (perintah) yang akan diberikan pada elemen pemicu
- Peristiwa: yakni insiden yang akan terjadi apabila pemicu telah mendapat 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 lalu menghilang (fadeOut)”
Jika dituliskan dalam bahasa JQuery, maka akan menghasilkan kalimat menyerupai ini:
$('.subjek').click(function() { $('#area').fadeOut(); });Dan ini yakni bentuk elemennya:
<button class='subjek'>Pencet!</button> <div id='area'>Konten</div>Event-Event Dasar
.click()
Digunakan untuk menjadikan insiden menurut agresi klik pada subjek/pemicu.
$('.subjek').click(function() { $('#area').fadeOut(); });.dblclick()
Digunakan untuk menjadikan insiden menurut agresi klik ganda pada subjek/pemicu.
$('.subjek').dblclick(function() { $('#area').fadeOut(); });.focus()
Digunakan untuk menjadikan insiden menurut agresi fokus pada subjek/pemicu (dikhususkan pada elemen-elemen berupa <input> dan <textarea>).
$('.subjek').focus(function() { $('#area').fadeOut(); });.mouseover()
Digunakan untuk menjadikan insiden menurut agresi kedatangan pointer mouse di atas subjek/pemicu baik pada elemen induk maupun bawah umur elemennya.
$('.subjek').mouseover(function() { $('#area').fadeOut(); });.mouseout()
Digunakan untuk menjadikan insiden menurut agresi kepergian pointer mouse dari atas subjek/pemicu baik pada elemen induk maupun bawah umur elemennya.
$('.subjek').mouseout(function() { $('#area').fadeOut(); });.mouseenter()
Mirip dengan .mouseover(), dipakai untuk menjadikan insiden menurut agresi kedatangan pointer mouse di atas subjek/pemicu. Namun dikala pointer mouse sudah memasuki elemen induk (.mouseover()) dan lalu pointer mendatangi bawah umur elemen di dalamnya, itu tidak masuk hitungan .mouseenter() untuk yang ke sekian kalinya.
$('.subjek').mouseenter(function() { $('#area').fadeOut(); });.mouseleave()
Mirip dengan .mouseout(), dipakai untuk menjadikan insiden menurut agresi kepergian pointer mouse dari subjek/pemicu. Namun dikala pointer mouse meninggalkan sebuah anak elemen (dan masih dalam elemen induk), itu tidak sanggup disebut sebagai .mouseleave(), sampai ketika pointer benar-benar telah keluar dari elemen induk, barulah sanggup disebut sebagai .mouseleave() (.mouseleave() terhadap elemen induk)
$('.subjek').mouseleave(function() { $('#area').fadeOut(); });.hover()
.hover() merupakan adonan antara event .mouseenter() dan .mouseleave(). Susunan event .hover() juga merupakan penggabungan antara .mouseenter() dan .mouseleave() menyerupai ini:
| .mouseenter() dan .mouseleave() | .hover() |
|---|---|
$('.subjek').mouseenter(function() { | $('.subjek').hover(function() { |
.scroll()
Digunakan untuk menjadikan insiden menurut agresi scroll pada area yang menjadi subjek/pemicu insiden (dikhususkan pada area-area yang mengandung scroll bar).
$('.subjek').scroll(function() { $('#area').fadeOut(); });.select()
Digunakan untuk menjadikan insiden menurut agresi seleksi pada subjek/pemicu (dikhususkan pada elemen-elemen berupa <input> dan <textarea>).
$('.subjek').select(function() { $('#area').fadeOut(); });