JQuery mempunya beberapa aksi untuk menangkap event yang dihasilkan oleh elemen HTML. Suatu elemen HTML dapat menghasilkan atau melemparkan event apabila suatu aksi dilakukan pada elemen tersebut. Misalkan aksi button diklik, aksi input text diisi, aksi pointer mouse diletakkan di atas suatu elemen dan aksi-aksi lain. Apabila suatu event dihasilkan atau dilemparkan maka jQuery dapat menerima atau menangkap event tersebut melalui event method atau action event.
Penulisan Event Method
Event method (Action event) adalah juga merupakan action pada jQuery dengan penamaan tertentu sesuai dengan jenis event yang ditangkap. Contoh di bawah ini adalah event method untuk event yang dihasilkan apabila elemen paragraf diklik (action click).
$("p").click();
Kita dapat perintah-perintah JavaScript atau jQuery di dalam event method dengan cara menambahkan suatu fungsi di dalam event method.
$("p").click(function(){
// action goes here!!
});
Jenis-Jenis Event Method
$(document).ready()
Event method ready berfungsi untuk menangkap event yang dihasilkan apabila seluruh dokumen HTML sudah selesai ditampilkan pada web browser.
click()
Event method click berfungsi untuk menangkap event yang dihasilkan apabila suatu elemen HTML diklik.
Contoh di bawah ini memperlihatkan suatu elemen paragraf akan hilang apabila elemen tersebut diklik.
$("p").click(function(){
$(this).hide();
});
dblclick()
Event method dblclick berfungsi untuk menangkap event yang dihasilkan apabila suatu elemen HTML diklik dua kali (doube click).
Contoh di bawah ini memperlihatkan suatu elemen paragraf akan hilang apabila elemen tersebut diklik dua kali.
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
Event method mouseenter berfungsi untuk menangkap event yang dihasilkan apabila mouse pointer berada di dalam area suatu elemen HTML.
Contoh di bawah ini memperlihatkan alert akan muncul apabila mouse pointer berada di dalam area elemen dengan id bernilai p1.
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
mouseleave()
Event method mouseleave berfungsi untuk menangkap event yang dihasilkan apabila mouse pointer meninggalkan area suatu elemen HTML.
Contoh di bawah ini memperlihatkan alert akan muncul apabila mouse pointer meninggalkan area elemen dengan id bernilai p1.
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
mousedown()
Event method mousedown berfungsi untuk menangkap event yang dihasilkan apabila mouse ditekan pada suatu elemen HTML.
Contoh di bawah ini memperlihatkan alert akan muncul apabila mouse ditekan pada elemen dengan id bernilai p1.
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
mouseup()
Event method mouseup berfungsi untuk menangkap event yang dihasilkan apabila mouse dilepaskan (setelah ditekan) pada suatu elemen HTML.
Contoh di bawah ini memperlihatkan alert akan muncul apabila mouse dilepaskan (setelah ditekan) pada elemen dengan id bernilai p1.
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
focus()
Event method focus berfungsi untuk menangkap event yang dihasilkan apabila suatu elemen HTML sedang berada dalam kondisi fokus.
Contoh di bawah ini memperlihatkan properti css background-color pada elemen input akan berubah menjadi berwarna #cccccc apabila suatu elemen input sedang berada dalam kondisi fokus.
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
Untuk mempelajari referensi event method lain silahkan pelajari link di bawah ini.
Referensi Lengkap Event Method jQuery
Method on()
Kita juga bisa memakai method on() untuk menangkap event. Parameter pertama dari method ini adalah nama event yang akan ditangkap. Contoh di bawah ini memperlihatkan method on() yang berfungsi untuk menangkap event click pada elemen paragraf.
$("p").on("click", function(){
$(this).hide();
});
Kita juga bisa menangkap beberapa jenis event dalam satu method on(). Contoh di bawah ini memperlihatkan method on() yang berfungsi untuk menangkap event mouseenter, mouseleave dan click sekaligus pada elemen paragraf.
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
Tutorial sebelumnya : Mengenal Selector
Tutorial setelahnya : Fungsi Hide Dan Show
Semua Tutorial JQuery : Tutorial JQuery