Apa Itu Event?
Event sering dipicu oleh interaksi user dengan halaman web, seperti ketika tautan atau tombol diklik, teks dimasukkan ke dalam kotak input atau text area, pemilihan dilakukan dalam kotak pilih, tombol ditekan pada keyboard, mouse pointer dipindahkan dll. Dalam beberapa kasus, Browser itu sendiri dapat memicu event, seperti load halaman dan unload event.
jQuery meningkatkan mekanisme penanganan kejadian dasar dengan menawarkan metode acara untuk sebagian besar acara browser asli, beberapa metode ini ready(), click(), keypress(), focus(), blur(), change(), dll. Misalnya, untuk menjalankan beberapa kode JavaScript saat DOM sudah siap, kalian dapat menggunakan metode jQuery ready(), seperti ini:
<script type="text/javascript">
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>
Secara umum, event dapat dikategorikan ke dalam empat kelompok utama – mouse event, keyboard event, form event dan document/window event. Bagian berikut ini akan memberi kalian gambaran singkat tentang semua event ini serta metode jQuery yang terkait satu per satu.
Mouse Event
Mouse event beraksi ketika pengguna mengklik beberapa elemen, memindahkan pointer mouse dll. Berikut ini beberapa metode jQuery yang umum digunakan untuk menangani mouse event.
Metode click()
Metode click() jQuery melampirkan fungsi event handler ke elemen yang dipilih untuk”click” event. Fungsi terlampir dijalankan ketika pengguna mengklik elemen itu. Contoh berikut akan menyembunyikan elemen <p> pada halaman saat diklik.
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>
Metode dblclick()
Metode jQuery dblclick() melampirkan fungsi event handler ke elemen yang dipilih untuk “dblclick” event. Fungsi terlampir dijalankan ketika pengguna mengklik dua kali pada elemen itu. Contoh berikut akan menyembunyikan elemen <p> ketika diklik dua kali.
<script type="text/javascript">
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>
Metode hover()
Metode hover() jQuery melampirkan satu atau dua fungsi event handler ke elemen yang dipilih yang dieksekusi ketika pointer mouse masuk dan meninggalkan elemen. Fungsi pertama dijalankan ketika pengguna menempatkan pointer mouse di atas suatu elemen, sedangkan fungsi kedua dieksekusi ketika pengguna memindahkan pointer mouse dari elemen tersebut.
Contoh berikut akan menyorot elemen <p> ketika kalian meletakkan kursor di atasnya, sorotan akan dihapus ketika kalian memindahkan kursornya.
<script type="text/javascript">
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>
Tips: Kalian dapat menganggap metode hover() adalah kombinasi dari metode jQuery mouseenter() dan mouseleave().
Metode Mouseenter()
Metode jQuery mouseenter() melampirkan fungsi event handler ke elemen yang dipilih yang dieksekusi ketika mouse memasukkan elemen. Contoh berikut akan menambahkan class highlight ke elemen <p> ketika kalian meletakkan kursor di atasnya.
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>
Metode Mouseleave()
Metode jQuery mouseleave() melampirkan fungsi event handler ke elemen yang dipilih yang dieksekusi ketika mouse meninggalkan elemen. Contoh berikut akan menghapus class highlight dari elemen <p> ketika kalian memindahkan kursor tersebut.
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>
Keyboard Event
Keyboard event aktif ketika pengguna menekan atau melepaskan tombol pada keyboard. Berikut adalah beberapa metode jQuery yang umum digunakan untuk meng-handle keyboard event.
Metode keypress()
Metode jQuery keypress() melampirkan fungsi event handler ke elemen yang dipilih (biasanya form kontrol) yang dieksekusi ketika browser menerima input keyboard dari user. Contoh berikut akan menampilkan pesan ketika keypress event dilepaskan dan berapa kali dilepaskan ketika kalian menekan tombol pada keyboard.
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
Catatan: keypress event mirip dengan keydown event, kecuali pengubah dan non-printing key seperti Shift, Esc, Backspace atau Delete, Tombol panah dll. Akan memicu keydown event tetapi tidak keypress event.
Metode keydown()
Metode jQuery keydown() melampirkan fungsi event handler ke elemen yang dipilih (biasanya membentuk kontrol) yang dieksekusi ketika user pertama kali menekan tombol pada keyboard. Contoh berikut ini akan menampilkan pesan ketika keydown event diaktifkan dan berapa kali diaktifkan ketika kalian menekan tombol pada keyboard.
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
Metode keyup()
Metode jQuery keyup() melampirkan fungsi event handler ke elemen yang dipilih (biasanya membentuk kontrol) yang dieksekusi ketika user melepaskan kunci pada keyboard. Contoh berikut akan menampilkan pesan ketika event keyup diaktifkan dan berapa kali diaktifkan ketika kalian menekan dan melepaskan tombol pada keyboard.
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
Tip: Keyboard event dapat dilampirkan ke elemen apa pun, tetapi event tersebut hanya dikirim ke elemen yang memiliki fokus. Itu sebabnya keyboard event umumnya dilampirkan ke form control seperti box input teks atau textarea.
Form Event
Form event diaktifkan ketika form control menerima atau kehilangan fokus atau ketika pengguna mengubah nilai form control seperti dengan mengetikkan teks dalam input teks, pilihan opsi apa pun di kotak pilih dll. Berikut ini beberapa metode jQuery yang umum digunakan untuk meng-handle form event.
Metode change()
Metode jQuery change() melampirkan fungsi event handler ke elemen <input>, <textarea> dan <select> yang dieksekusi ketika nilainya berubah. Contoh berikut akan menampilkan pesan peringatan ketika kalian memilih opsi apa pun di kotak pilih dropdown.
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>
Catatan: Untuk kotak pilih, checkboxes, dan radio button, event tersebut segera diaktifkan ketika user membuat pilihan dengan mouse, tetapi untuk input teks dan textarea event diaktifkan setelah elemen kehilangan fokus.
Metode focus()
Metode jQuery focus() melampirkan fungsi event handler ke elemen yang dipilih (biasanya form control dan tautan) yang dieksekusi ketika mendapatkan fokus. Contoh berikut akan menampilkan pesan ketika input teks menerima fokus.
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
Metode blur()
Metode jQuery blur() melampirkan fungsi event handler ke elemen form seperti <input>, <textarea>, <select> yang dieksekusi ketika kehilangan fokus. Contoh berikut akan menampilkan pesan ketika input teks kehilangan fokus.
<script type="text/javascript">
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
Metode submit()
Metode jQuery submit() melampirkan fungsi event handler ke elemen <form> yang dieksekusi ketika user mencoba mengirimkan formulir. Contoh berikut akan menampilkan pesan tergantung pada nilai yang dimasukkan ketika kalian mencoba mengirimkan formulir.
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>
Tips: Formulir dapat dikirimkan baik dengan mengklik submit button, atau dengan menekan Enter saat elemen formulir tertentu memiliki fokus.
Document/Window Event
Event juga dipicu dalam situasi ketika halaman DOM (Document Object Model) siap atau ketika user mengubah ukuran atau meng-scroll jendela browser, dll. Berikut ini beberapa metode jQuery yang umum digunakan untuk meng-handle event semacam itu.
Metode ready()
Metode jQuery ready() menentukan fungsi yang akan dijalankan ketika DOM terisi penuh.
Contoh berikut akan menggantikan teks paragraf segera setelah hierarki DOM telah dibangun sepenuhnya dan siap untuk dimanipulasi.
<script type="text/javascript">
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
Metode resize()
Metode resize() jQuery melampirkan fungsi event handler ke elemen window yang dieksekusi ketika ukuran jendela browser berubah.
Contoh berikut akan menampilkan lebar dan tinggi jendela browser saat ini ketika kalian mencoba untuk mengubah ukurannya dengan menarik sudut-sudutnya.
<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>
Metode scroll()
Metode jQuery scroll() melampirkan fungsi event handler ke window atau iframe dan elemen yang dapat discroll yang dieksekusi setiap kali posisi elemen scroll berubah.
Contoh berikut akan menampilkan pesan ketika kalian meng-scroll jendela browser.
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>