Mudah belajar jQuery part 3

jQuery event
Apa itu event?
Semua tindakan yang dapat direspon oleh halaman web. Suatu event mewakili suatu yang terjadi. Contoh dalam menggerakkan mouse, dalam menekan tombol, atau saat kita mengetik keyboard. Semua itu ada eventnya masing-masing

Berikut ini adalah beberapa event yang umum:
– Mouse event: click,dblclick,mouseenter,mouseleave
– Keyboard event:
Keypress,keydown,keyup
– Form event:
Submit,change,focus,blur
– Document/windows event:
Load,resize,scroll,unload

Di jQuery, sebagian besar event memiliki metode jQuery yang sama. Contohnya kita tinggal memilih selector lalu diikuti titik dan nama eventnya, untuk membuat event click seperti:

$(“#tombol”).click();

Ini berarti jika id button dipasang id tombol maka akan ter klik otomatis oleh script.

Lalu untuk menentukan apa yang harus terjadi ketika button di klik, kita harus memasukan fungsi kedalam event click tersebut. Contohnya:

$(“#tombol”).click(function(){
//Aksi
});

Berikut adalah contoh event jQuery yang umum digunakan:

$(document).ready()
memungkinkan kita untuk mengeksekusi suatu fungsi ketika dokumen sudah selesai dimuat. Ready = Siap. Sudah siap halaman nya atau tidak sedang loading.

click()
Ketika user mengklik sesuatu. Event click() akan terpanggil, contohnya seperti klik pada button tadi.

dblclick()
Hampir sama dengan event click(). Bedanya hanya saja even dblclick () ini meng klik nya harus double. Sudah terlihat pada nama eventnya dblclick() yang sebenarnya itu adalah double click

mouseenter()
Event ini ketika pointer mouse mendatangi element maka akan terpanggil aksinya. Contoh:

$(“#tombol”).mouseenter(function(){
//Aksi
});

mouseleave()
Kebalikannya dari mouseenter ketika mouse pergi dari elemen yang disorot maka event ini akan terpanggil.

Begitu mudahnya kita tinggal ganti nama eventnya saja dengan yang kita inginkan contoh nya $().event() jadi event bisa kita ganti event nya apakah click,dblclick,atau yang event yang kita kehendaki.

Lalu bagaimana cara untuk satu elemen bisa lebih satu event? Caranya gunakan methode on(), dengan method on() kita bisa memasukan event lebih dari satu, contohnya seperti berikut ini:

$(“#tombol”).on({
mouseenter: function(){
//Aksi
},
mouseleave: function(){
//Aksi
},
click: function(){
//Aksi
}
});

Related posts

Leave a Comment