Metode Acara jQuery
jQuery dibuat khusus untuk menanggapi peristiwa di halaman HTML.
Apa itu Acara?
Semua tindakan pengunjung berbeda yang dapat ditanggapi oleh halaman web disebut peristiwa.
Sebuah peristiwa mewakili saat yang tepat ketika sesuatu terjadi.
Contoh:
- menggerakkan mouse di atas elemen
- memilih tombol radio
- mengklik elemen
Istilah "kebakaran/pembakaran" sering digunakan dengan peristiwa. Contoh: "Acara penekanan tombol diaktifkan, saat Anda menekan tombol".
Berikut adalah beberapa peristiwa DOM yang umum:
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
Sintaks jQuery Untuk Metode Acara
Di jQuery, sebagian besar acara DOM memiliki metode jQuery yang setara.
Untuk menetapkan peristiwa klik ke semua paragraf di halaman, Anda dapat melakukan ini:
$("p").click();
Langkah selanjutnya adalah menentukan apa yang harus terjadi ketika peristiwa itu terjadi. Anda harus meneruskan fungsi ke acara:
$("p").click(function(){
// action goes here!!
});
Metode Acara jQuery yang Umum Digunakan
$(dokumen).siap()
Metode $(document).ready()ini memungkinkan kita untuk menjalankan fungsi saat dokumen dimuat penuh. Acara ini sudah dijelaskan di
bab Sintaks jQuery .
klik()
Metode click()ini melampirkan fungsi event handler ke elemen HTML.
Fungsi ini dijalankan ketika pengguna mengklik elemen HTML.
Contoh berikut mengatakan: Saat peristiwa klik diaktifkan pada <p>elemen; sembunyikan <p>elemen saat ini:
Contoh
$("p").click(function(){
$(this).hide();
});
klik klik()
Metode dblclick()ini melampirkan fungsi event handler ke elemen HTML.
Fungsi ini dijalankan ketika pengguna mengklik dua kali pada elemen HTML:
Contoh
$("p").dblclick(function(){
$(this).hide();
});
mouse masuk()
Metode mouseenter()ini melampirkan fungsi event handler ke elemen HTML.
Fungsi dijalankan ketika pointer mouse memasuki elemen HTML:
Contoh
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
cuti tikus()
Metode mouseleave()ini melampirkan fungsi event handler ke elemen HTML.
Fungsi dijalankan ketika penunjuk tetikus meninggalkan elemen HTML:
Contoh
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
mouse ke bawah()
Metode mousedown()ini melampirkan fungsi event handler ke elemen HTML.
Fungsi dijalankan, ketika tombol kiri, tengah atau kanan mouse ditekan, saat mouse berada di atas elemen HTML:
Contoh
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
mouseup()
Metode mouseup()ini melampirkan fungsi event handler ke elemen HTML.
Fungsi dijalankan, ketika tombol kiri, tengah atau kanan mouse dilepaskan, saat mouse berada di atas elemen HTML:
Contoh
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
melayang-layang()
Metode hover()ini mengambil dua fungsi dan merupakan kombinasi dari metode mouseenter()and mouseleave()
.
Fungsi pertama dijalankan ketika mouse memasuki elemen HTML, dan fungsi kedua dijalankan ketika mouse meninggalkan elemen HTML:
Contoh
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
fokus()
Metode focus()ini melampirkan fungsi event handler ke bidang formulir HTML.
Fungsi dijalankan ketika bidang formulir mendapat fokus:
Contoh
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
mengaburkan()
Metode blur()ini melampirkan fungsi event handler ke bidang formulir HTML.
Fungsi dijalankan ketika bidang formulir kehilangan fokus:
Contoh
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
Metode on()
Metode on()ini melampirkan satu atau lebih event handler untuk elemen yang dipilih.
Lampirkan acara klik ke <p>elemen:
Contoh
$("p").on("click", function(){
$(this).hide();
});
Lampirkan beberapa event handler ke <p>elemen:
Contoh
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
Latihan jQuery
Metode Acara jQuery
Untuk referensi acara jQuery lengkap, silakan kunjungi Referensi Acara jQuery kami .